Here is the HTML code I am working with:
<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>
This is the CSS associated with it:
.selectOption {
color: #999;
font-style : italic;
text-transform: none;
font-variant: small-caps; }
The issue I am facing is that while this styling works fine in Internet Explorer 8, Firefox 5 does not apply the "selectOption" class to the dropdown text. Despite Firebug showing that the class is there and applied, the displayed text in the select dropdown control remains unchanged. The change only reflects in the dropdown list, but not in the displayed line.
You can view a demo of this at http://jsfiddle.net/photo_tom/vRZCr/