The Idea:
Using custom styling in an HTML form is so hard to accomplish, that most people don’t do it. Our little script, together with the MooTools JS Library will help you to easily style combo boxes and buttons.
The advantage of our method is that it is completely unobstrusive (users without JavaScript will just have normal combo boxes) and supports keyboard access - try it!
Our script should work in all modern browsers and has been tested in Internet Explorer 6 and 7, Firefox 3, Safari 3 and Chrome 2.
The Code:
In your html document, use SELECT tags as you normally would. Just make sure that you do the positioning of these elements through a parent container (i.e. embed all your SELECT elements in a div and use that to position it).
Then call the styleSelect() method on these elements:
$$(’select’).styleSelect();
That’s all!
You will probably want to adjust the styling of the combo boxes. The new, styled combo box is assembled of 3 elements: the left border, the center (holding the label) and the right border. The different states are accomplished similarly.