Styling dropdown select boxes ...

styling the border lines
styling the dropdown button
styling the option items

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:

A text input field. I did not succeed to find a (reasonable) cross browser solution to get the legend names of every text area in the proper position with css only. The "fieldset" property has such a different interpretation in different browsers, that a general solution seems impossible. So I pushed the "Escape to Table Styling" key ...
A submit button can be styled in css without too much problems.

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!

But browser specific properties of a select box mean that the positioning of the 4 needed images around the select box is browser dependent...
... and often not resistant to font scaling.

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.

But this way needs browser sniffing, to give other browsers the usual 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.

IE can give a styled background color and text color, no more.
Opera (8.01) can display the text color only.
Firefox and Netscape can apply background color, text color, font-weight, (separation) border lines, and they can suppress the first (repeating) line with the default option.

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.

In this testpage the styling for FF is giving superior results compared to other browsers.
IE6 (with * html, or conditional comment) is reasonable, but not too good if the font size is not normal.
For Opera8 and Netscape6 and ... additional correcting styles are needed.

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