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.

Deutero

Answer 1

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:

Lundt

So which means we cant override the style browser using for display optiongroup labels, in above screenshot Swedish cars and American cars?i wan to display those labels in Normal font weight for all browsers. I want to display that in normal font for all browsers. – Deutero

Yeah, you cant do that with CSS, its part of the browser's chrome, unfortunately. – Lundt

this is no longer the case, you should look at the latest answers – Fluoride

It is the case as of this writing; although, the display is not consistent across all browsers. – Chrismatory

Answer 2

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.

Amontillado

Working in IE10, FF21, Chrome28, and Opera12 as of this date. (Sorry, don't have Safari installed!) Note: On most of the mentioned browsers, the entire <optgroup> section is styled, not just the label. – Chrismatory

If you apply styles to option tags as well as to optgroup tags, you can effectively control the presentation of the label without altering the standard presentation of the list items. – Wyatan

FYI this is not working on Safari and Chrome under OSX. It still works on FF. – Stereogram

Answer 3

Firefox style the label using this rule :

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

You can override it.

Rant

Answer 4

For a different approach to circumvent the problems with styling optgroups i suggest using disabled options.

<option disabled>[group label]</option>

you can have a shot on styling it via eg.

<style> [disabled] { color:#000; background-color:#CCC } </style>

Unrelenting

I noticed that this doesn't style on mobile devices. Is there a way to do that? – Feil

Answer 5

You can style a select box using only css, it requires a sort of work around:

First, you surround it with a div and give that a class:

<div class="selectStyle">
    <select>
        <option>First Option</option>
        <option>Second Option</option>
    </select>
</div>

Then you make sure the select elements are styled a certain way using css:

.selectStyle select {
   background: transparent;
   width: 250px;
   padding: 4px;
   font-size: 1em;
   border: 1px solid #ddd;
   height: 25px;
}

And you style the div:

.selectStyle {
   width: 235px;
   height: 25px;
   overflow: hidden;
   background: url(yourArrow.png) no-repeat right #ccc;
}

Gomuti

i want to style only optgroup Label – Deutero

Then you simply target the optgroup: optgroup[label="Swedish Cars"] – Gomuti

Gnanz is talking about the label attribute. Being specific about the optgroup doesn't really address his problem. – Trothplight

Answer 6

You can style the <optgroup> label only for Firefox like following

optgroup[label] {
   color: grey;
   font-style: inherit;
   font-weight: 300;
   text-shadow: none
}

Beal

Answer 7

You can renounce to the label attribute and set instead a disabled <option> as first element within your <optgroup>, and then style this option.

<select>
  <option>1. One</option>
  <option>2. Two</option>
  <optgroup>
    <option disabled style="background:#dfb;color:#555;position:relative;top:-0.7em">3. Three</option>
    <option>3.1 Three dot one</option>
    <option>3.2 Three dot two</option>
  </optgroup>
  <option>4. Four</option>
</select>

additional tips:

If you don't need the <optgroup> in itself, a variant is just using the disabled option(s), which up to a certain extent will visually will emulate the optgroups by creating sections in your list.

For aesthetic reason, if you use the disabled option within an optgroup, I recommend slighly moving it upward with position:relative;top:-0.7em.

Incognito

Answer 8

<style>
.select2-container--bootstrap .select2-results__group {
    color: inherit;
    font-size: inherit;
    font-weight:bold;
    padding: 6px 4px;
}

Gastrostomy

Please improve your answer by adding some explanation of your code. – Consentient

This code does not do anything as is. It needs an explanation. – Escaut

Answer 9

.select2-results__group{
  /* put your style here */
}

Bosky