Question

我想在使用css的html中的选择选项之间添加某种空间（填充，边距或其他）。我已经尝试过使用类似的东西：

 select option {
     padding:10px
 }

然而它没有用。我已经读过这可能会做，但它在IE中不起作用。无论如何，我想让它在其他浏览器中工作，即使它在IE中不起作用。

PS：目前正在使用Chrome

JSFiddle example

Answer 1

选择选项的样式非常有限，以保持操作系统中所有应用程序之间的一致性和一致性，因此浏览器应该限制某些基本元素的样式，例如在您的case选项标记中。

限制取决于浏览器到浏览器，如填充甚至选项标签的边距在mozilla firefox中有效，而它不适用于chrome。

如果你的网站非常需要设置选项标签的样式，那么我建议你使用一些jQuery插件（你也可以自己制作一个简单的插件）。

Answer 2

选项标签的外观由浏览器根据我的经验确定，并且通常有充分的理由 - 想想iOS v chrome的外观有多么不同以及它的好处。

但是，您可以使用浏览器带前缀appearance属性来对select元素进行一些控制。

例如：

select {
    padding: 2px 10px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

但是，点击后，它们会像您正常使用的浏览器一样显示。

如果你想要更好的控制，我认为你最好的选择是@ sumitb.mdi建议jquery plugin或者从头开始构建类似的东西。

添加填充以选择选项

2 个答案: