Добавление класса CSS в один из вариантов выбора не работает в FF5

Question

У меня есть следующий HTML-код

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

со следующим css

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

Моя проблема в том, что это работает, как и ожидалось, в IE8, но в FF5 добавление класса css "selectOption" не влияет на стилизацию. В Firebug я вижу, что класс был выбран и применен к элементу. Однако он не меняет отображаемый текст в раскрывающемся списке выбора. Он изменяется в раскрывающемся списке, но не в строке дисплея.

См. Демонстрацию на http://jsfiddle.net/photo_tom/vRZCr/

Answer 1

Что ж, проблема CSS в стороне, это то, что вам нужно:

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

Answer 2

То, что показано в строке отображения в Firefox, на самом деле не вариант;это просто текст из опции.Вы можете проверить это, внедрив элементы со стилем, как дети из <option> и увидев стилизацию из тех, которые не отображаются в строке дисплея.

Некоторые браузеры взламывают вещи, где некоторые (но не все!)стили <option> применяются к строке дисплея.Мы собирались сделать что-то подобное в Gecko, но, учитывая полное отсутствие взаимодействия с браузером, мы бы предпочли спецификацию того, как все должно вести себя, прежде чем раскачивать лодку с изменениями поведения.