CSS：设置 HTML <select> 多项选择元素的样式

Question

我在一个页面上使用了一些<select row="3" multiple="multiple">元素。

我一直在尝试设计它们的样式，以便里面的文本与页面的其余部分相匹配。
我开始改变字体(select {font-family: 'foo';})。但是，我需要增加新字体的字体大小和行高。它不让我改变这一点。我试过使用内联样式，样式化select，样式化option s。

我怎么能改变属性像font-size和line-height在<select>盒子里?

Answer 1

不幸的是，并不是所有的浏览器都允许你改变SELECT或OPTION项的布局。

你可能会说，最好不要去管选择框、optgroup和options的样式，让它们保持默认值，因为跨浏览器的样式是如此不一致，不值得这么麻烦。

一个很好的网站解释了可以被样式化的事情如下:HTML:

<select multiple="multiple">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
</select>

你的CSS(示例):

select {
    font-family: 'Times New Roman';
}
select option {
    background-color: #FFFF00;
    color: #FF0000;
}

Answer 2

结果可能依赖于操作系统，也可能依赖于浏览器。尽管CSS样式可以应用于select和options元素，但我可以看到一些浏览器(尤其是旧的浏览器)可能只是遵从操作系统来显示这些小部件。

这是一个类似于How to style a

Answer 3

我很惊讶居然没有人提到Chosen

selected是一个jQuery插件，它使长而笨拙的选择框更加友好。

支持所有现代桌面浏览器(Firefox, Chrome, Safari和IE9)。还启用了对IE8的旧版支持。在iPhone、iPod Touch和Android移动设备上禁用。

因为它用div替换了select元素，然后绑定了两者之间的所有事件，所以你可以随心所欲地设置它的样式，它仍然会像一个普通的选择框一样起作用。很酷。