Styling dropdown select boxes

An experiment ...

Look in Firefox first!

name:
e-mail:
more we like to know:
course:

What?

How the select box?

  1. styling the border lines
  2. styling the dropdown button
  3. styling the option items

Conclusion

Screenshots

What?

Styling forms with css is difficult, and a lot of things are just impossible. In this experiment I tried to style a select box and some other form elements:

The select box is the one which causes headaches.

Above you see the result in your actual browser. Screenshots of some browsers are below.

How the select box?

1. Styling the border lines
It appeared impossible to get rid of the default border lines of a select box by changing the css. A  { border: 0; }  doesn't work.
My workaround is to cover these border lines with 4 images around. Because the select box has to be clickable, it is impossible to realize it with one covering image with a transparent inside!


2. Styling the dropdown button
The styling of the dropdown button is an other story.

Because the dropdown button has to clickable to see the select items, a covering image cannot be applied here.

But some browsers (Firefox, Netscape) allow a background image in the select box. My workaround is to paint a self styled button in the background image. Then the select box can get an extra width of the width of this "button", and the remaining real select button can be covered by an image: then is seems to be out of the viewport. This causes no harm for clicking, as the whole select box is clickable, and not only the real button.


3. Styling the option items
Styling the options (if the select box is opened) has more or less success; again the browser is giving the degree of success.

Here no problems: the not supported style properties are ignored, and don't mess up the show.

Conclusion

To style a dropdown select box is heavy work.

While Firefox is a beauty, my conclusion is that it is impossible to find a general css for the box borders and the drop down button. The difference between browsers is so big, that each browser needs his own additional styles (and hacks or a browser sniffer to get these styles implemented).

The easiest way is to style only the options of the select box, and let the box itself and the default roll out button intact.

It's a pity...

francky

Screenshots

Default select box  

Select box on top of this page, as seen by:

Firefox 1.07  

IE 6  

Opera 8.01  

Netscape 6  

(All screenshots are taken at resolution 1024x768, font-size normal, Win98SE)

Valid HTML 4.01 Transitional

Valid CSS

 ( experiment triggered by the [css-d] thread "Arrow", 15 sept. 2006 )