很简单，有什么方法可以在 Chrome/Safari 中设置特定选择选项的样式吗？
例如，如果我有：
<select class="the-select">
<option class="header">TECHNICIANS</option>
<option>Joe Smith</option>
<option>Joe White</option>
<option class="header">PRODUCERS</option>
<option>Jane Black</option>
<option>Cindy Gray</option>
</select>
无论如何，是否可以使用“标题”类来专门设置这些选项的样式？显然在 CSS 中，如果你这样做：
select.the-select option.header {
background-color:#ff9900;
}
这应该可以工作，并且可以在其他浏览器中使用，但不能在 Chrome/Safari 中使用。这只是一个 webkit 问题吗？有解决方法吗？
Thanks!
编辑：这似乎是一个基于 OSX webkit 的浏览器问题，因为它似乎可以在 Windows 上运行。我忽略了我不能使用 optgroups 的事实，因为我们也需要能够选择这些选项。我知道 optgroups 将是理想的解决方案，但不幸的是在这种情况下情况并非如此。
我最近发现了这种仅使用 CSS 来自定义选择标签样式的技术。
HTML:
<div class="styled-select">
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
</div>
CSS:
.styled-select {
width: 342px;
height: 30px;
overflow: hidden;
background: url("/img/selectarrow.png") no-repeat right;
border: none;
opacity: 0.8;
background-color: #999999;
}
.styled-select select {
background: transparent;
width: 342px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
font-size: 16px;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
font-weight: 200;
font-family: "lato", sans-serif;
font-size: 18px;
}
.styled-select select:focus {
outline: none;
}
这是一个小提琴：http://jsfiddle.net/eshellborn/AyDms/
然后确保下拉图像中有一张名为“selectarrow”的图片。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
