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

【问题标题】：CSS: Style HTML <select> multiple-choice elementsCSS：样式 HTML <select> 多选元素
【发布时间】：2011-10-07 05:56:33
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

我很惊讶还没有人提到Chosen。

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

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

因为它用 div 替换了 select 元素，然后绑定了两者之间的所有事件，所以您可以随意设置它的样式，它仍然会像普通的选择框一样做出反应。很酷。

【讨论】：

【解决方案2】：

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

您可能会说最好保留选择框、optgroup 和选项的样式，并将它们保留为默认值，因为跨浏览器样式如此不一致，不值得费心。

向您解释可以样式化的东西的好网站如下：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;
}

【讨论】：

已添加到 jsfiddle：jsfiddle.net/5TJmy -- 在 Vista 上的 Chrome 上（是的，真的！），不考虑字体大小和填充。您可以更改设置中的填充和字体大小吗？

【解决方案3】：

结果可能取决于操作系统，也可能取决于浏览器。尽管 CSS 样式可以应用于选择和选项元素，但我可以看到某些浏览器（尤其是旧浏览器）可能只是遵从操作系统来显示这些小部件。

【讨论】：

是的，我期待浏览器的差异化；我只是为了一个近似值。我没有使用旧浏览器！此外，链接的问题是针对下拉菜单，它显然更具风格...
没错，当然是好的。但它们在操作系统小部件的意义上是相似的，甚至新浏览器也可以随意忽略您的样式。我可能不应该与这么老的问题联系起来，但我认为这种情绪仍然是准确的。我想你可能不得不自己动手。有很多用于菜单、列表框和下拉菜单的 JS 插件和纯 CSS 解决方案。祝你好运！