Bootstrap添加填充以选择选项

Question

我只是想知道是否可以在Twitter Boostrap框架中的选择下拉列表中为选择选项添加填充。我已经为所有其他输入添加了填充，因此我的选择选项上的填充不符合要求。我希望有类似......

option {
    padding: 0 24px;
}

...要做到这一点，但这对引导选择选项没有任何作用。

任何帮助都将不胜感激。

编辑：

这里是jsFiddle：

http://jsfiddle.net/sbmw3egx/

Answer 1

通过设置select属性，我可以将text-indent中的文字调整到左侧：

 select.form-control {
    text-indent: 16px;
 }

有关此处text-indent属性的更多信息：http://www.w3schools.com/cssref/pr_text_text-indent.asp

希望有所帮助！

修改：Chrome / Safari使用text-indent，Firefox使用text-indent和padding-left，IE使用padding-left select。我不确定如何指定CSS以使其在所有这些浏览器中保持一致。

Answer 2

假设您正在使用Bootstrap form-control，则显示的第一个选项将采用form-control CSS类的样式。因此，您也需要覆盖form-control。

option {
    padding: 0 24px;
}

select.form-control {
    padding: 0 24px;
}

演示：http://bootply.com/dCJM6I7z5V

Answer 3

这是难以定型的元素之一。通常我会尝试使用简单的css，但在这种情况下（如果你真的必须设计它），那么我会使用插件。

http://www.bartos.me/heapbox/就是一个例子。