CSS3 中的选择标签（下拉菜单）中的 Padding-Left答案

【问题标题】：Padding-Left in Select Tag (dropdown) in CSS3CSS3 中的选择标签（下拉菜单）中的 Padding-Left
【发布时间】：2013-12-07 01:00:44
【问题描述】：

据我所知，没有解决方案可以在所有现代浏览器中的选择框（下拉菜单）中获得一致的左内边距。

<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：填充，带有奇怪的文本缩进 bug

还有其他方法可以解决此问题吗？似乎最好的方法是放弃 text-indent 并尝试找出一种在没有它的情况下在 Safari 中缩进的方法，因为其他所有东西都可以很好地处理填充。

【问题讨论】：

这里[使用选择选项居中对齐文本][1] [1]：stackoverflow.com/questions/10028788/…
你可以在这里看到 [Center Align Text with Select Option][1] [1]: stackoverflow.com/questions/10028788/…
如何使用选择选项垂直对齐文本。 [使用选择选项居中对齐文本][1] [1]：stackoverflow.com/questions/10028788/…

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这是我发现的最好的工作：

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

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

【讨论】：

【解决方案3】：

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

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

这将具有类似于 padding-left 的效果

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

你能用小提琴演示一下吗？在 Chrome 中设置选项标签的样式没有任何作用。我还没有检查过其他浏览器。 jsfiddle.net/9da9q 我假设你的意思是“左”，而不是“左填充”，但两者都不起作用，所以它既不在这里也不在那里。