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!

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.