Html 将CSS类添加到选择不在FF5中工作的选项中

我有以下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>

我的问题是，这在IE8中可以正常工作，但在FF5中，添加css类“selectOption”不会影响样式。在Firebug中，我可以看到该类已被选中并应用于该项。但是，它不会更改“选择”下拉控件中显示的文本。它会在下拉列表中更改，但不会在显示行中更改

---

请参见

的演示。好吧，撇开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>

请选择值
COM-佣金和奖金
假期工资

---

Firefox中显示的内容实际上不是选项；这只是选项中的文本。您可以通过将带有样式的元素作为

的子元素注入，并查看那些未显示在显示行中的元素的样式来测试这一点

---

有些浏览器会将

的一些（但不是全部！）样式应用于显示行。我们一直在考虑在Gecko中做类似的事情，但考虑到这里完全缺乏浏览器互操作，我们宁愿在改变行为之前制定一个行为规范。

运行Firefox 5.0对我来说似乎很好。不要将IE作为工作方式的参考。

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