Style text option in dropdown select

Question

I'm just trying to apply some basic styles to different options in a dropdown select element. In Firefox, the styles work, but in Chrome and IE9 the styles don't take effect, even though in Chrome I can see in the debug inspector that the styles are being read and not overridden by any other styles. Any ideas?

E.g this rule:

select option.depth-0 {
    font-weight: bold;
}

On this element:

<option value="1" class="depth-0">Home</option>

I think the only way is to style the `select` element (i.e. no control over individual items)... — cambraca, Nov 29 '11 at 15:41
Check out below Stackoveflow link you may get your answer http://stackoverflow.com/q/1895476/287100 — pramodtech, Nov 29 '11 at 15:45
Given up and have gone for indentation instead. The reason for trying to do this was to show a hierarchical structure — Harry F, Nov 29 '11 at 17:04
You can show hierarchical structure using `OPTGROUP` element. — antyrat, Nov 30 '11 at 09:57

antyrat · Answer 1 · 2011-11-29T16:03:11.697

Swap select and option selectors in your css:

option.depth-0 select{
    font-weight: bold;
}

Edit

Option select element actually not part of browser. It is part of OS. It difficult to style.

For example you can't change height of some option in select element. Changing font-weight assumed that too.

The only option I see is to create your own custom select element. Using JavaScript for example. Then you can customize it as you need using CSS. And it will be crossbrowser.

Style text option in dropdown select

1 Answers1