Styling single selection menu controls (select 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. <option>Option 3</option>
5. </select>

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

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

In your current browser, with your current settings, the select elements look like this:

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