仅在 Firefox 浏览器中应用于选择选项的样式？答案

【问题标题】：Style applied for select option in Firefox browser alone?仅在 Firefox 浏览器中应用于选择选项的样式？
【发布时间】：2011-12-19 12:13:54
【问题描述】：

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

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

在我的风格中，我应用了样式标题，

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

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

【问题讨论】：

对我来说很好用，FireFox 8.0，jsfiddle.net/sVKjv
发帖前请先搜索一下：stackoverflow.com/search?q=style+select+option
抱歉只在FF工作。其余浏览器不支持

标签： html styles cross-browser

【解决方案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/

【讨论】：