仅在Firefox浏览器中用于选择选项的样式

Question

在我的表单中有如下选择选项

<select>
<option class="hdng">Number</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option class="hdng">Alphabets</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>

在我的样式中，我应用了style heading，

.hdng
{
font-weight: bold;
padding-top: 10px;
}

以上样式仅适用于Firefox浏览器。其余浏览器不支持该样式。有什么解决办法吗?

Answer 1

这对我来说在Chrome 16也失败了，考虑使用往往有更好的样式支持的optgroups &对于你想要做的事情，在语义上是正确的。

<select>
<optgroup label="Number">
   <option>1</option>
   <option>2</option>
   <option>3</option>
</optgroup>
<optgroup label="Alphabets">
   <option>a</option>
   <option>b</option>
   <option>c</option>
</optgroup>    
</select>

http://jsfiddle.net/sVKjv/1/