19

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>
Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
user991830
  • 864
  • 5
  • 17
  • 35
  • settle for optgoups or build a "fake" js/css based drop down - also, possible duplicate to: http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select – Hannes Jan 31 '12 at 11:46

5 Answers5

43

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: enter image description here

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

Solomon Ucko
  • 5,724
  • 3
  • 24
  • 45
Royi Namir
  • 144,742
  • 138
  • 468
  • 792
8

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

Sotiris
  • 38,986
  • 11
  • 53
  • 85
  • 9
    thanks for this... its great, but doesn't work in Chrome (fine in Firefox) – user991830 Jan 31 '12 at 12:04
  • 2
    @user991830 doesn't support bold for `option` elements, but the pseudo-class works. Check this example that change the color http://jsfiddle.net/sqshN/1/ – Sotiris Jan 31 '12 at 12:12
  • [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. – lpd Jan 31 '12 at 12:13
  • There is a Chromium issue for this. I added a comment, maybe some more votes would get someone to make this work: https://code.google.com/p/chromium/issues/detail?id=44917&q=select%20styling%20bold&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified#makechanges – AlignedDev Sep 29 '15 at 15:36
  • Your answer should *at least* mention that this is not a cross-browser solution. – MrUpsidown Sep 27 '16 at 12:39
5

Using css in the works as a quicker, easier alternative

<option value="value" style="font-weight: bold;">SELECT ME</option>
Ben Davis
  • 102
  • 1
  • 6
-1

You could do it with jQuery. 

  $('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));

You'd have to add some logic to determine which options to bold, obviously.

Evan Lalo
  • 1,209
  • 1
  • 14
  • 34
-2

This also works (Firefox 50 and Chrome 55). Items 3 and 5 are shown in bold

   <style>
    .bld {font-weight:bold;}
   </style>
   <select>
    <option value = "1">Kanakangi
    <option value = "2">Ratnangi
    <option class = "bld" value = "8">Hanumatthodi
    <option value = "9">Dhenuka
    <option class = "bld" value = "15">Mayamalavagowla
    <option value = "16">Chakravaaham
  </select>
Community
  • 1
  • 1
Mani
  • 17
  • 1