Styled file select controls

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

The following CSS rules were used to style these file select controls:

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;}

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

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

Mozilla/FF Mac

IE Mac

Opera Mac

Safari

Camino

IE 6 Win 2k

Mozilla/FF Win 2k

Opera Win 2k

IE 6 Win XP

Mozilla/FF Win XP

Opera Win XP

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