添加填充以选择选项

Question

我想在使用CSS的html中的选择选项之间添加某种空间(填充,边距或其他).我已经尝试过使用类似的东西:

 select option {
     padding:10px
 }

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

PS:目前正在使用Chrome

JSFiddle示例

Answer 1

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

限制取决于浏览器到浏览器,如填充甚至选项标签的边距在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插件或者从头开始构建类似的东西.