How to highlight the first choice in all browsers?

Question

I tried to highlight the first option of the selection window, but it only works in Firefox, and not in other browsers (Chrome, IE). Here is the code I 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 the demo in jsfiddle .

Answer 1

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

Answer 2

As you have discovered, this cannot be done with a cross browser;)

It is best to use selectbox script replacement if you need custom formatting or display

Answer 3

As far as I know, it does not work in IE unless you draw the select tag:

 select{ font-weight:bold; } 

However, this will affect all parameters. I don’t know another css-only solution, but you will be interested in one of them :)

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