Styling options in bold in Internet Explorer

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:

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?

EDIT: A sample:

HTML:

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

CSS:

.special {
    font-weight: bold;
}

Solution 1

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.

Solution 2

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

Comments

[Marcelo]

Thank you, but I can't use jQuery

[Matt]

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]

for more information you might read this link: home.tiscali.nl/developerscorner/fdc-varia/…

[Tomas]

Seems that Chrome and also Opera ([1], [2]) has the same problem?

[Jukka K. Korpela]

This applies up to IE 10. In IE 11, option elements can be styled independently (e.g., set to use bold face).