针对特定样式的纯CSS解决方案<；选择>；基于webkit的浏览器中的选项？

很简单，有没有办法在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>

这应该可以工作，在其他浏览器中也可以，但在Chrome/Safari中不行。这只是一个webkit问题吗？是否有解决方法

谢谢

---

编辑：这似乎是一个基于OSX webkit的浏览器问题，因为它似乎在Windows上工作。我忽略了一个事实，即我不能使用optgroup，因为我们还需要能够选择这些选项。我知道optgroups将是理想的解决方案，但不幸的是，在本例中情况并非如此。

如果您只想让它们清楚地成为标题，请使用用于此目的的标记：。这也可以帮助您应用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>

乔-史密斯
乔·怀特
简·布莱克
辛迪·格雷

我最近发现了一种技术，可以用CSS定制select标记的样式

HTML:

这是一把小提琴：

---

然后确保在下拉图像中有一张名为“selectarrow”的图片

实际上，您可以尝试应用“-webkit外观：无；”供选择

选择选项{
-webkit外观：无；
}
选择option.blue{
颜色：蓝色；
背景颜色：绿色；
}
选择option.red{
颜色：红色；
背景颜色：灰色；
}
选择option.pink{
颜色：粉红色；
背景颜色：黄色；
}

一些选择1
一些选择2
一些选择3

在Windows上的Chrome v28中，这一可能的副本对我来说很好。也许这是MAC的问题。谢谢ricovox，这是真的。似乎是基于OSX webkit的浏览器问题，而不是基于完整webkit的浏览器问题。哎呀！我忘了提到我们不能使用optgroup，因为我们还需要能够选择标题。我不确定是否要+1这个答案，因为我是带着一个不同的问题来到这里的，但我非常感谢您指出

元素，这正是我要找的！

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

.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;
 }