The drop-down select HTML element has become a staple in most online forms. It serves its particular purpose rather well - allowing a person to select one item from a list of choices.
The only problem is that the humble select element is the ugly duckling of the HTML form family. The font and background colour are the only elements you can style successfully across all browsers. Firefox, Chrome & Safari allow for more creativity, but as we all know, their big brother, Internet Explorer, has some serious issues with fashion. It prefers to enforce a very 1990's aesthetic, which in this case, is a very basic rectangular (no rounded corners or gradient background) construct.
Because of this backwards mentality, we (us Web building folks) were forced to design our forms with this limitation in mind. We cannot have a bunch of inputs with nice rounded corners and gradient backgrounds and then in the middle of it all a blue-bordered rectangle with an old-school down-arrow button glued to its side.
Eventually my patience wore thin and I said to myself, enuff! (and thank goodness I knew just enough about Jquery's goodness to back this statement up). I started building one from scratch using an a-tag (with a background-image), an unordered list and some Jquery statements. The select element is still there, but I have hidden its ugly countenance. When you make your choice from the list, the value gets passed to the hidden select element ready for the submitting.
And that's it really... check out the demo.
Now ain't that sweet?
Notice that the second option delivers a vertical scroll-bar for long lists.
For those who know how to copy and paste, here is the code, CSS and HTML. You could also just download the zipped bundle.
Let the beautification begin!
P.S. If you are looking for a more fully-featured solution with all the bells and whistles, please use these clever people's solution. My solution is very basic and it certainly does not cover all the functionality of the original select element but it certainly looks better than the standard version.
You make me so proud Mars... remember when we struggled to get this going for Vega.
Posted by Blaize on 2009/07/30