如何在所有浏览器中加粗选择的第一个选项？答案

【问题标题】：How to bold the first option of a select across all browsers?如何在所有浏览器中加粗选择的第一个选项？
【发布时间】：2011-12-02 13:11:03
【问题描述】：

我尝试将选择框的第一个选项加粗，但它仅适用于 Firefox，不适用于其他浏览器（Chrome、IE）。这是我尝试过的代码。

HTML

<select id="htmldisabled">
    <option class="bold">test1</option>
    <option>test2</option>
    <option>test3</option>
    <option>test4</option>
    <option>test5</option>
    <option>test6</option>
</select>

CSS

.bold {
     font-weight:bold;   
}

在jsfiddle 上查看演示。

【问题讨论】：

我不确定这是否受支持...
好问题 mr.t.k... 有趣的难波...

标签： html css html-select

【解决方案1】：

#htmldisabled:first-child{
    font-weight:bold;
}

【讨论】：

不能在 Firefox 和 IE 中工作。在 Firefox 中，所有选项都是粗体。

【解决方案2】：

正如您所发现的，它不能跨浏览器完成；）

如果您需要特殊格式或显示，最好使用selectbox replacement script

【讨论】：

【解决方案3】：

据我所知，它在 IE 中不起作用，除非您设置 select 标签的样式：

select{
    font-weight:bold;
}

但是，这会影响所有选项。我不知道另一种纯 css 解决方案，但也会对一个感兴趣:)

【讨论】：

【解决方案4】：

试试吧，

css

option:first-child {
     font-weight:bold;   
   }

HTML

<select id="htmldisabled">
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
    <option>test4</option>
    <option>test5</option>
    <option>test6</option>
</select>

【讨论】：

IE 也不行。请在发布前测试答案，除非您确定它们有效。
@anglimass 请看 OP。我需要加粗选择框的第一个选项，而不是应用颜色。