Search code examples
htmlcssstyling

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

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.

Solution

  • 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:

    enter image description here

    And this in Firefox:

    enter image description here