css select dropdown bold on some <option>'s

Question

On a select dropdown, I need to make certain items 'strong/bold'.

How can I do this?

Example of what I ideally require:

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option>

Solution 1

you could use :nth-child(N)

option:nth-child(1), option:nth-child(4) {
    font-weight:bold;
}

Demo: http://jsfiddle.net/Sotiris/sqshN/

Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild

Solution 2

You actually can't.

The closest thing (you can't choose a bold item)

 <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>

Which gives you this:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

You can also build one of your own but it won't be input an input tag (you should use inputs of your own).

Solution 3

Using css in the works as a quicker, easier alternative

<option value="value" style="font-weight: bold;">SELECT ME</option>

Comments

[Hannes]

settle for optgoups or build a "fake" js/css based drop down - also, possible duplicate to: stackoverflow.com/questions/7208786/…

[user991830]

thanks for this... its great, but doesn't work in Chrome (fine in Firefox)

[Sotiris]

@user991830 doesn't support bold for option elements, but the pseudo-class works. Check this example that change the color jsfiddle.net/sqshN/1

[lpd]

[Windows] Chrome has never allowed drop down styling since it uses the OSes API. I recall a discrepancy like that when trying to achieve something similar.

[AlignedDev]

There is a Chromium issue for this. I added a comment, maybe some more votes would get someone to make this work: code.google.com/p/chromium/issues/…

[MrUpsidown]

Your answer should at least mention that this is not a cross-browser solution.