Styling single selection menu control option groups (optgroup elements) with CSS

This demo page is related to the article Styling form controls with CSS, revisited. For more info on the purpose of this page, please read the article.

Each single selection menu control consists of this HTML:

  1. <select>
  2. <option selected>Option 1</option>
  3. <option>Option 2</option>
  4. <optgroup label="Option group 1">
  5. <option>Sub option 1</option>
  6. <option>Sub option 2</option>
  7. <option>Sub option 3</option>
  8. </optgroup>
  9. <option>Option 3</option>
  10. </select>

The following CSS rules are used to style the optgroup elements:

  1. #el01 optgroup {width:20em} /* Width */
  2. #el02 optgroup { /* Text and background colour, blue on light gray */
  3. color:#00f;
  4. background-color:#ddd;
  5. }
  6. #el03 optgroup {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
  7. #el04 optgroup {border-width:6px} /* Border width */
  8. #el05 optgroup {border:2px dotted #00f} /* Border width, style and colour */
  9. #el06 optgroup {border:none} /* No border */
  10. #el07 optgroup {font-family:"Courier New",Courier} /* Different font */
  11. #el08 optgroup {font-size:2em} /* Bigger text */
  12. #el09 optgroup {font-size:0.5em} /* Smaller text */
  13. #el10 optgroup { /* Normal, bold text */
  14. font-style:normal;
  15. font-weight:bold;
  16. }
  17. #el11 optgroup {padding:1em} /* Increase padding */
  18. #el12 optgroup { /* Change font style and text alignment */
  19. font-style:italic;
  20. text-align:right;
  21. }

In your current browser, with your current settings, the optgroup elements look like this (open each menu to see the styling of its optgroup element):

Note that the first option element of each select element is selected. Different browsers have different ways of indicating this.

Here are screenshots from several browsers on different operating systems:

  1. Camino 1, Mac OS X 10.4.8
  2. Firefox 2.0.0.1, Mac OS X 10.4.8
  3. Firefox 2.0.0.1, Ubuntu 6.10
  4. Firefox 2.0.0.1, Windows XP
  5. iCab 3.0.3, Mac OS X 10.4.8
  6. Internet Explorer 6, Windows XP
  7. Internet Explorer 7, Windows XP
  8. Konqueror 3.5.5, Kubuntu
  9. OmniWeb 5.5.1, Mac OS X 10.4.8
  10. Opera 9.10, Mac OS X 10.4.8
  11. Opera 9.10, Ubuntu 6.10
  12. Opera 9.10, Windows XP
  13. Safari 2.0.4, Mac OS X 10.4.8
  14. WebKit 420+, Mac OS X 10.4.8
Camino 1, Mac OS X 10.4.8

Back to screenshot list

Firefox 2, Mac OS X 10.4.8

Back to screenshot list

Firefox 2, Ubuntu 6.10

Back to screenshot list

Firefox 2, Windows XP

Back to screenshot list

iCab 3, Mac OS X 10.4.8

Back to screenshot list

Internet Explorer 6, Windows XP

Back to screenshot list

Internet Explorer 7, Windows XP

Back to screenshot list

Konqueror 3.5.5, Kubuntu

Back to screenshot list

OmniWeb 5.5.1, Mac OS X 10.4.8

Back to screenshot list

Opera 9.10, Mac OS X 10.4.8

Back to screenshot list

Opera 9.10, Ubuntu 6.10

Back to screenshot list

Opera 9.10, Windows XP

Back to screenshot list

Safari 2, Mac OS X 10.4.8

Back to screenshot list

WebKit 420+, Mac OS X 10.4.8

Back to screenshot list

Lab Index | 456 Berea Street Home | Copyright © Roger Johansson