Question

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/

Answer 1

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/