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

html css styling
Gnanz picture Gnanz · Sep 17, 2011 · Viewed 63.7k times · Source

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

Helrik picture Helrik · Jul 19, 2012

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.

Related questions

Horizontal scroll on overflow of table

I have a basic table in a container. The table will have about 25 columns. I am trying to add a horizontal scroll bar on overflow of the table and am having a really tough time. What is happening now, is …

Read More
Line break (like <br>) using only css

Is it possible in pure css, that is without adding additional html tags, to make a line break like <br>? I want the line break after the <h4> element, but not before: HTML <li> …

Read More
CSS or what? Forcing the text split into multiple lines

Forcing the text split into multiple lines when it reaches the maximum width of the #div. How can I do this? because, if I try to output data with 200 characters without spacing, I get the following: Result 1 (no spacing): aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... …

Read More