CSS 如何设置选择标签的选项元素的样式？

How to style a select tag's option element?

提问by Mike

I'm trying to set the style of an optionin a selectdropdown menu in Google Chrome. It works in all browsers except IE9 and Chrome.

我正在尝试在 Google Chromeoption的select下拉菜单中设置样式。它适用于除 IE9 和 Chrome 之外的所有浏览器。

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.

在不使用 JavaScript 的情况下，有没有办法为 Google Chrome 中的选项设置样式？选择后，背景颜色不显示。

回答by Tushar Roy

Unfortunately, WebKit browsers do not support styling of <option>tags yet, except for colorand background-color.

不幸的是，WebKit 浏览器还不支持<option>标签样式，除了color和background-color。

The most widely used cross browser solution is to use <ul>/ <li>and style them using CSS. Frameworks like Bootstrapdo this well.

最广泛使用的跨浏览器解决方案是使用<ul>/<li>并使用 CSS 设置样式。像Bootstrap这样的框架在这方面做得很好。

回答by Pierre de LESPINAY

It's a choice (from browser devs or W3C, I can't find any W3C specification about styling select options though) not allowing to style select options.

这是一个选择（来自浏览器开发人员或 W3C，虽然我找不到任何关于样式选择选项的 W3C 规范）不允许样式选择选项。

I suspect this would be to keep consistency with native choice lists.
(think about mobile devices for example).

我怀疑这是为了与本地选择列表保持一致。
（例如考虑移动设备）。

3 solutions come to my mind:

我想到了3个解决方案：

• Use Select2which actually converts your selects into uls (allowing many things)
• Split your selects into multiple in order to group values
• Split into optgroup

• 使用Select2实际上将您的选择转换为uls（允许很多事情）
• 将您的selects拆分为多个以对值进行分组
• 拆分成 optgroup

回答by TylerH

Since version 49+, Chrome has supported styling <option>elements with font-weight. Source: https://code.google.com/p/chromium/issues/detail?id=44917#c22

从 49+ 版本开始，Chrome 支持<option>带有font-weight. 来源：https: //code.google.com/p/chromium/issues/detail?id=44917#c22

New SELECT Popup: font-weight style should be applied.

This CL removes themeChromiumSkia.css. |!important|in it prevented to apply font-weight. Now html.css has |font-weight:normal|, and |!important|should be unnecessary.

新的 SELECT 弹出窗口：应应用字体粗细样式。

此 CL 删除了 themeChromiumSkia.css。|!important|在它阻止申请font-weight。现在 html.css 有|font-weight:normal|, |!important|应该是不必要的。

There was a Chrome stylesheet, themeChromiumSkia.css, that used font-weight: normal !important;in it all this time. It was introduced to the stable Chrome channel in version 49.0.

有一个 Chrome 样式表，themeChromiumSkia.css，一直在使用font-weight: normal !important;它。它在 49.0 版本中引入了稳定的 Chrome 频道。

回答by xxjjnn

I have a workaround using jquery... although we cannot style a particular option, we can style the select itself - and use javascript to change the class of the select based on what is selected. It works sufficiently for simple cases.

我有一个使用 jquery 的解决方法......虽然我们无法设置特定选项的样式，但我们可以设置选择本身的样式 - 并使用 javascript 根据选择的内容更改选择的类。它适用于简单的情况。

$('select.potentially_red').on('change', function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});
$('select.potentially_red').each( function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});

.option_red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- The js will affect all selects which have the class 'potentially_red' -->
<select name="color" class="potentially_red">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Note that the js is in two parts, the eachpart for initializing everything on the page correctly, the .on('change', ...part for responding to change. I was unable to mangle the js into a function to DRY it up, it breaks it for some reason

请注意，js 分为两部分，each部分用于正确初始化页面上的所有内容，.on('change', ...部分用于响应更改。我无法将 js 分解成一个函数来干燥它，它出于某种原因破坏了它

回答by LeoV117

I actually discovered something recently that seems to work for styling individual <option></option>elements within Chrome, Firefox, and IE using pure CSS.

我实际上最近发现了一些似乎适用<option></option>于使用纯 CSS为Chrome、Firefox 和 IE 中的单个元素设置样式的东西。

Maybe, try the following:

也许，请尝试以下操作：

HTML:

HTML：

<select>
    <option value="blank">Blank</option>
    <option class="white" value="white">White</option>
    <option class="red" value="red">Red</option>
    <option class="blue" value="blue">Blue</option>
</select>

CSS:

CSS：

select {
    background-color:#000;
    color: #FFF;
}

select * {
    background-color:#000;
    color:#FFF;
}

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */
    background-color:#F00;
    color:#FFF;
}

select *.white {
    background-color:#FFF;
    color:#000;
}

select *.blue {
    background-color:#06F;
    color:#FFF;
}

Strange what throwing caution to the wind does. It doesn't seem to support the :active :hover :focus :link :visited :after :before, though.

奇怪的是，把谨慎抛诸脑后会发生什么。不过，它似乎不支持:active :hover :focus :link :visited :after :before.

Example on JSFiddle: http://jsfiddle.net/Xd7TJ/2/

JSFiddle 示例：http: //jsfiddle.net/Xd7TJ/2/