纯粹的 CSS 解决方案，用于在基于 webkit 的浏览器中对特定的 <select> 选项进行样式设计？

Question

很简单，有没有什么方法可以在 ChromeSafari 中对特定的选择选项进行样式化？

例如，如果我有。

<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>

有没有办法用 "header "类来专门为这些选项设置样式？很明显，在CSS中，如果你这样做。

select.the-select option.header {
    background-color:#ff9900;
}

这应该可以，而且在其他浏览器中也可以，但在ChromeSafari浏览器中不行。这是否只是 webkit 的问题，是否有任何解决方法？

谢谢

编辑：这似乎是一个基于 OSX 的 webkit 浏览器问题，因为它似乎在 Windows 上可以工作。我忽略了一个事实，那就是我不能使用 optgroups，因为我们也需要能够选择这些选项。我知道 optgroups 是最理想的解决方案，但不幸的是，在这种情况下无法实现。

Answer 1

我最近遇到了这个技术，只用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.neteshellbornAyDms

然后确保你得到一个名为'selectarrow'的图片作为下拉图片。

Answer 2

如果你只是想让它们清楚地成为标题，就用一个标签来实现。<optgroup>. 这也可以帮助你应用CSS。

<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>

Answer 3

其实你可以尝试应用'-webkit-appearance: none;'作为选项。

 select option {
      -webkit-appearance: none;
      
    }

    select option.blue {
      color: blue;
      background-color: green;
    }

    select option.red {
      color: red;
      background-color: gray;
    }

    select option.pink {
      color: pink;
      background-color: yellow;
    }

<select>
      <option class="blue">SomeOption1</option>
      <option class="red">SomeOption2</option>
      <option class="pink">SomeOption3</option>
    <select>