Javascript 在CSS3的选择标记（下拉列表）中向左填充

据我所知，在所有现代浏览器的选择框（下拉列表）中，没有一种解决方案可以保持一致的填充

<select class="dropdown">
    <option>Planes</option>
    <option>Trains</option>
    <option>Automobiles</option>
</select>

.dropdown {
    padding-left: 10px;
    text-indent: 10px;
}

即：仅填充渲染

铬：两者都渲染

Safari:仅文本缩进

Firefox:padding，带有奇怪的文本缩进bug

有没有其他办法解决这个问题？似乎最好的方法是放弃文本缩进，并尝试找出一种在Safari中不使用文本缩进的方法，因为其他方法都可以很好地处理填充

---

相关小提琴：

相信我，没有什么好办法。选择框的样式一直是有缺陷的，支持有限

---

由于您可以使用jQuery，我建议使用类似或的东西，它们都可以通过包含一个“假”选择框来设置您的选择框的样式，同时隐藏真实的选择框。

您必须以不同的方式进行处理。这就是你应该做的：

option
{
position: relative;
padding-left: 5px; /*or whatever*/
}

---

这是一种通用的方法，可以完成工作。

以下是我发现的最有效的方法：

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 10px;
}

在撰写本文时，它可以在Chrome、Safari和Firefox上运行

---

希望这对别人有帮助

我在不使用select插件的情况下完成这项工作的唯一方法是在文本前添加空格，如下所示：

<option>&nbsp;&nbsp;&nbsp;Some Text Here</option>

这里有一些文本

---

这将具有类似于左填充的效果。

此处[将文本与选择选项居中对齐][1][1]：您可以在此处看到[将文本与选择选项居中对齐][1][1]：如何将文本与选择选项垂直对齐。[用选择选项将文本居中对齐][1][1]：您能用小提琴演示一下吗？在Chrome中设置选项标记的样式没有任何作用。我还没有检查其他浏览器。我想你的意思是“左”，而不是“左填充”，但两者都不起作用，所以这似乎是最好的解决方案。谢谢你，想想看@赫罗德先生，不用担心。