在CSS3中的Select Tag(下拉菜单)中向左填充

Question

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

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

我听说的解决方案是使用文本缩进，但这在Firefox中完全不起作用，更不用说在其他浏览器中偶尔支持了。如果你使用一个组合，你实际上会在所有主要的浏览器中得到完全不同的结果。

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

IE：仅填充渲染

Chrome：两者都渲染

Safari：仅文本缩进呈现

Firefox：填充，带有奇怪的文本缩进错误

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

相关Fiddle：http://jsfiddle.net/s3Lrh/1/

Answer 1

相信我，没有什么好方法可以做到这一点。样式选择框一直存在缺陷，支持有限。

既然你可以使用jQuery，我建议你使用Select2或Chosen，它们都可以通过包含一个"假"选择框来设计你的选择框，同时隐藏真实的选择框。

Answer 2

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

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

在撰写本文时，这适用于Chrome、Safari和Firefox。

Answer 3

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

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

这将具有与填充左侧类似的效果

Answer 4

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

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

这是一种通用的方法，它可以完成任务。