Pure CSS solution to styling specific <select> options in webkit based browsers?

Question

Quite simply, is there any way to style specific select options in Chrome/Safari?

For example, if I had:

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

Is there anyway to style specifically those options with the class "header"? Obviously in CSS, if you do this:

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

This should work, and does in other browsers, but not Chrome/Safari. Is this just a webkit issue and are there any workarounds for this?

Thanks!

EDIT: This seems to be an OSX webkit based browser issue, as it seems to work on Windows. I neglected to mention the fact that I cannot use optgroups because we need to be able to select those options as well. I am aware that optgroups would be the ideal solution, but unfortunately that cannot be the case in this instance.

Answer 1

I recently came across this technique to custom style a select tag with only 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;
 }

Here's a fiddle: http://jsfiddle.net/eshellborn/AyDms/

And then just make sure you get a picture called 'selectarrow' for the drop-down image.

Answer 2

If you just want them to clearly be headers, use a tag intended for this: <optgroup>. This might also help you with applying 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

Actually you can try applying '-webkit-appearance: none;' for option.

 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>