Adding CSS class to one option of select not working in FF5

I have the following html code

<select id="WageBenifits_PayType" name="WageBenifits.PayType">
    <option class="selectOption" value="" selected="selected">Please Select Value</option>
    <option value="COM">COM - COMMISSIONS AND BONUS PAY</option>
    <option value="HOL">HOL - HOLIDAY PAY</option>
</select>

With the following css

.selectOption {
   color: #999;
   font-style : italic;
   text-transform: none; 
   font-variant: small-caps; }

My problem is that this works as expected in IE8, but in FF5, adding the css class "selectOption" doesn't affect the styling. In Firebug, I can see that the class has been selected and applied to the item. However, it doesn't change the displayed text in the select dropdown control. 开发者_如何学编程It is changed in the dropdown list, but not in the display line.

See demo at http://jsfiddle.net/photo_tom/vRZCr/

Well, CSS issue aside, this is actually what you want:

<select id="WageBenifits_PayType" name="WageBenifits.PayType">
    <option disabled="disabled">Please Select Value</option>
    <option value="COM">COM - COMMISSIONS AND BONUS PAY</option>
    <option value="HOL">HOL - HOLIDAY PAY</option>
</select>

http://jsfiddle.net/AlienWebguy/vRZCr/1/

What's shown in the display line in Firefox is not actually the option; it's just the text from the option. You can test this by injecting elements with styling as kids of the <option> and seeing the styling from those not show up in the display line.

Some browsers hack things in where some (but not all!) of an <option>'s styles are applied to the display line. We've been considering doing something like that in Gecko, but given the complete lack of browser interop here we'd rather have a spec for how things should behave before rocking the boat with changes to behavior.