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

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.