Select dropdown option bold in chrome

Question

Is there any way to make an <option> tag bold in a select box in Chrome and IE using CSS? It's working in Firefox.

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

This is the same question as here, but there was no answer.

Congratulations; the idiotic Chrome developers have now made dropdowns bold by default. Enjoy. — Lightness Races in Orbit, Apr 17 '16 at 00:47

score 2 · Accepted Answer · answered Jul 18 '12 at 08:05

2

You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this.

What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.

And here's a great "howto" on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

answered Jul 18 '12 at 08:05

Raab

34,778
4
50
65

Is there any way to do it with javascript?? – raki Jul 18 '12 at 14:54

score 0 · Answer 2 · edited Mar 06 '14 at 18:51

0

I used <option class="bold">Bold Text here</option>

with CSS:

option.bold {
     font-weight:bold;
}

and it worked for Firefox (Mac and Windows) and for IE11, but not for Chrome or Safari.

edited Mar 06 '14 at 18:51

Ankur Aggarwal

2,993
5
30
56

answered Mar 06 '14 at 18:21

shotgunflat creative agency

1

score 0 · Answer 3 · edited Nov 27 '14 at 08:25

0

Since Chrome doesn't allow bold font on option tag, you can use text-shadow property like

text-shadow: 0px 0px 0px black;

It will give same appearance of bold and work on all the browsers.

edited Nov 27 '14 at 08:25

slavoo

5,798
64
37
39

answered Nov 27 '14 at 08:03

Pritesh

167
1
3

1

This did not have any effect on the option for me in Chrome. – AlignedDev Sep 29 '15 at 14:36

Select dropdown option bold in chrome

3 Answers3

Linked