Styling option group label

I know that this thread is a bit old, but just in case someone stumbles on it as I have... It has been mentioned that when styling the optgroup tag that it styles the entire group. This is true, but if you style the option tag separately, the optgroup formatting will remain as set in the style, but the style formatting for the option which is a child of the optgroup will override the optgroup formatting that is inherited when no style is set for the option.

So, setting the following css style for optgroup will give you red text on a gray background.

optgroup {
    background-color: gray;
    color: red;
}

If nothing else is done, your entire list will be red text on a gray background. However, also setting the option style as below will keep the optgroup labels styled red on gray, but the options under the group will be black on white.

option {
    background-color: white;
    color: black;
}

Use attribute Selector

[label]
{
color: red;
}

EDIT

<select>
<optgroup label="Cars">
<option>Honda</option>
<option>Merc</option>
</optgroup>
<optgroup label="Bikes">
<option>Kawasaki</option>
<option>Yamaha</option>
</optgroup>
</select>


optgroup[label="Cars"]
{
color: red;
}

optgroup[label="Bikes"]
{
color: blue;
}

option
{
color: black;
}

Using the [label] attribute selector as suggested everywhere is mostly irrelevant. You cannot apply styles to HTML attributes. It's merely a modifier to filter out optgroup elements. If all your optgroup have a label then you'll be selecting them all anyway and if some do not have label then they'll just opt-out from the style:

optgroup[label]{
  color: red;
}
<select size="8">
  <optgroup label="Cars">
    <option>Honda</option>
    <option>Merc</option>
  </optgroup>
  <optgroup>
    <option>Not label</option>
    <option>Not label either</option>
  </optgroup>
  <optgroup label="Bikes">
    <option>Kawasaki</option>
    <option>Yamaha</option>
  </optgroup>
</select>

The <select> tag has the problem of other complex form controls like <input type="file">. Original specs assumed that it'd be up to the browser how to display it (in fact, it was typically a builtin GUI control provided by the underlying library) and don't provide comprehensive means to style it. Just look at this screen-shot found in the W3C HTML 4.01 Specification:

optgroup at HTML4

Back to our problem, there're two facts to take into account:

  • The <optgroup> is a block that includes child <option>s
  • The label does not really have a node of its own

This snippet makes it more clear:

optgroup{
  margin: 1em;
  border: 1px solid green;
}
optgroup option{
  margin: 1em;
  border: 1px solid orange;
}
<select size="13">
  <optgroup label="Cars">
    <option>Honda</option>
    <option>Merc</option>
  </optgroup>
  <optgroup label="Bikes">
    <option>Kawasaki</option>
    <option>Yamaha</option>
  </optgroup>
</select>

So all you can do is to apply styles to <optgroup> (understanding you can't tell the label apart from the rest of items) and then overwrite them as necessary for child options.

Tags:

Css

Recent Posts