How to bold the first option of a select across all browsers?

问题

I have tried to bold the first option of the select box but it's only working in Firefox, not other browsers (Chrome, IE). Here is the code I've tried.

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

See demo at jsfiddle.

回答1:

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

回答2:

As you've discovered, it can't be done cross-browser ;)

Best to use a selectbox replacement script if you need special formatting or display

回答3:

To my knowledge it doesnt work in IE unless you style the select tag:

select{
    font-weight:bold;
}

However this will influence all options. I dont know of another css-only solution, but would be interested in one as-well :)

回答4:

Just try,

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>

来源：https://stackoverflow.com/questions/8356797/how-to-bold-the-first-option-of-a-select-across-all-browsers