Styled multiple select boxes

This page is related to the article Styling even more form controls. For more info on what the images on this page show, please read that article.

The following CSS rules were used to style these multiple select boxes:

1. #el01 {color:#00f;}
2. #el02 {background-color:#ddd;}
3. #el03 {color:#fff; background-color:#33b;}
4. #el04 {border-width:4px;}
5. #el05 {border-color:#00f;}
6. #el06 {border:0;}
7. #el07 {font-family:"Courier New", Courier;}
8. #el08 {font-size:150%;}
9. #el09 {font-size:10%;}
10. #el10 {font-weight:bold;}
11. #el11 {padding:0;}
12. #el12 {margin:0; text-align:right; width:10em;}

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

And here are screenshots from several browsers on different operating systems:

As you can see, the results vary a lot between browsers and operating systems.