How to change the style of a <select>'s <optgroup> label?

Question

I have a simple select box with an option group in my application.

<select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </optgroup>
   ----
   ----
   ----
</select>

When it gets displayed in browser, the option group label is displayed in bold and italic; I want it to be displayed without any of those styles.

Answer 1

On most browsers (tested on latest IE and FF), you can easily change the optgroup's label with CSS only:

    select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

Obviously, you can set any classname instead of the select html tag.

By the way, as other answers said, there are still few CSS options to use with select boxes and many webmasters override them using the method given by user949847. But this code above should be sufficient to match your needs.

Answer 2

Unfortunately select boxes are one of the few things that you can add very little style to with CSS. You are usually limited to how the browser renders it.

For example, it looks like this in chrome:

And this in Firefox:

Answer 3

Firefox style the label using this rule :

optgroup:before {
    content: attr(label);
    display: block;
}

You can override it.