CSS：样式HTML <select>多选元素</select>

Question

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

我一直在尝试设置它们的样式，以便内部文本与页面的其余部分匹配 我开始更改字体（select {font-family: 'foo';}）。但是，我需要增加新字体的字体大小和行高。它不是让我改变它。我尝试使用内联样式，为select设置样式，并为option设置样式。

如何在font-size框中更改line-height和<select>等属性？

Answer 1

不幸的是，并非所有浏览器都允许您更改SELECT或OPTION项目的布局。

你可以说最好不要选择选择框，optgroup和选项的样式，只留下它们作为默认设置，因为跨浏览器样式是如此不一致，这是不值得的。

好的网站向您解释 CAN 的样式如下：Table containing all info you need。

您的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 <select> dropdown with CSS only without JavaScript?类似的问题。

Answer 3

我很惊讶没人提到Chosen。

  

Chosen是一个jQuery插件，它使长而笨重的选择框更加用户友好。

     

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

因为它用div替换了select元素然后绑定了两者之间的所有事件，你可以根据自己的意愿设置它的样式，它仍然会像正常的选择框一样反应。很酷。