Styling options in bold

Question

I am getting a styling problem with options. I need some options to appear in bold style, but Internet Explorer doesn't want to render it.

I'm setting it using CSS using font-weight: bold;, which is not working.

An example can be seen in this page: Example, which shows bold fonts in Firefox but not in Internet Explorer.

I have tried in Internet Explorer 7 and 8.

Has anyone has an alternative?

A sample:

HTML:

<select>
    <option class="special">Special</option>
</select>

CSS:

.special {
    font-weight: bold;
}

We will need to see more of your code, if we are to identify the problem. Please submit the smallest part of your code which is **still valid** and where the error is **still visible**. — jforberg, Jul 11 '11 at 19:54

score 17 · Accepted Answer · answered Jul 11 '11 at 20:50

17

IE doesn't allow styling of <option> elements independently. This is because IE uses a Windows form control to render the select box, which doesn't support this feature.

(as an aside, this is the same reason that IE's select boxes can have issues with layering when you put them behind other objects; the form control is being rendered by the Windows OS, not by the browser, so the browser has less control over it than most other elements on the page)

Other modern browsers do allow you to do it, as they render their own select boxes rather than deferring to the OS.

answered Jul 11 '11 at 20:50

Spudley

166,037
39
233
307

1

Seems that [Chrome](http://stackoverflow.com/q/11536763/684229) and also Opera ([\[1\]](http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-option/#opera91-xp), [\[2\]](http://my.opera.com/community/forums/topic.dml?id=278101)) has the same problem? – Tomas May 09 '13 at 16:10
2

This applies up to IE 10. In IE 11, `option` elements can be styled independently (e.g., set to use bold face). – Jukka K. Korpela Jul 01 '14 at 10:20

score 5 · Answer 2 · edited May 23 '17 at 11:51

5

in IE, you can't style an option. I had the same issue...you can give it color but not much else.

You could write a jquery plugin or find an existing one to "convert" your select to a styled list/dropdown.

Also see: Create a styled Dropdown like on jquery UI

edited May 23 '17 at 11:51

Community

1
1

answered Jul 11 '11 at 19:57

Matt

477
1
5
19

Thank you, but I can't use jQuery – Marcelo Jul 11 '11 at 20:00
ok - the short answer then is that you can't add font-weight to a select/option in IE. Try to add font-weight to another element (like a p or div) and see that it works in IE. And then try to add font color to your style for the option and see that if that works. Only solution is to find a javascript or jquery tool that will create a styled list that "looks like" a dropdown. Otherwise it doesn't work in IE. – Matt Jul 11 '11 at 20:03
for more information you might read this link: http://home.tiscali.nl/developerscorner/fdc-varia/styling-dropdown-boxes.htm – Matt Jul 11 '11 at 20:04

score -5 · Answer 3 · answered Jul 11 '11 at 19:56

You need to apply the font-weight:bold to the paragraph of text, not to an outer div or something else.

Also, make sure nothing else is overriding this declaration. If the above doesn't work, change it to font-weight:bold!important and see if that fixes the problem.

Styling options in bold

3 Answers3

Linked

Related