如何deviseselect标签的选项元素？
我试图在Google Chrome的select下拉菜单中设置option的样式。 它适用于除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>
如果不使用JavaScript，有没有一种方法可以将样式设置为Google Chrome中的选项？ 一旦选定，背景颜色不会显示。
不幸的是，除了color和background-color之外，WebKit浏览器还不支持<option>标签样式。
使用最广泛的跨浏览器解决scheme是使用<ul> / <li>并使用CSS对其进行设置。 像Bootstrap这样的框架做得很好。
这是一个select（从浏览器开发人员或W3C，我找不到任何有关样式select选项的W3C规范），不允许样式select选项。
我怀疑这将是保持与本地select列表的一致性。
（例如考虑移动设备）。
我想起了三个解决scheme：
- 使用Select2它实际上将您的select转换成
ul（允许许多事情） - 将你的
select分成多个，以便对值进行分组 - 分成
optgroup
我实际上最近发现了一些东西，似乎在使用纯CSS的Chrome，Firefox和IE中为各个<option></option>元素devise样式。
也许，请尝试以下方法：
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：
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; }
奇怪的是，要警惕的是风。 它似乎并不支持:active :hover :focus :link :visited :after :before ，虽然。
JSFiddle示例： http : //jsfiddle.net/Xd7TJ/2/
Chrome的未来版本现在将支持使用font-weight样式<option>元素。 来源： https ： //code.google.com/p/chromium/issues/detail？id = 44917＃c22
新的SELECT Popup：字体重量样式应该被应用。
这个CL删除themeChromiumSkia.css。
|!important|在它阻止应用font-weight。 现在html.css有|font-weight:normal|，和|!important|应该是不必要的。
有一个Chrome的样式表，themeChromiumSkia.css，使用font-weight: normal !important; 在这一切中。 它应该在稳定的Chrome版本49.0版本。
我有一个解决方法，使用jquery …虽然我们不能devise一个特定的选项，我们可以select自己的样式 – 并使用JavaScript来改变基于select的select类。 它适用于简单的情况。
$('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>
