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;
}

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

Answer 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

Answer 3

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.