My Tech World

Creating Custom Select Elements

There is no shortage of articles available on the web that discuss the creation of custom select elements in HTML forms as alternatives to the default browser controls – widely accepted as ugly.

Styling your garden-variety select can only be taken so far using CSS.  Internet Explorer in particular is the worst offender (I’ll wait for your collective gasp of astonishment here), with its z-index alone causing no end of pain to the web developer.

Monday By Noon has just posted an excellent article on Creating Custom Form Elements, looking at the select component first.  The implementation uses Progressive Enhancement so that all the scripts degrade gracefully down to HTML.  For the uninitiated, Progressive Enhancement is a web design strategy that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies.

While the Monday By Noon article is by far my favourite that I’ve read recently, I thought it would help to have a list of possible alternative approaches.  Please feel free to suggest additions to this list.

Monday By Noon : Creating Custom Form Elements

This is an excellent article that has been well-written with good working examples and code samples.

Filament Group : Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider

Not strictly an article on creating select boxes, but is still related and provides an alternative that you may not have considered for use on your solution.  Well written again with useful examples and code samples.

Sanchez Salvador : jQuery.Combobox

An easy-to-use drop-down jQuery plugin that can be styled easily enough with CSS.  Built against the outdated 1.1.3 build of jQuery, but would probably work just as well with the latest release (1.3.2 at time of writing).

Brainfault : Select Box Replacement

Another jQuery plugin.  Not a particularly well-written supporting article or demo, but the plugin may be of use in some situations.

Webtoolkit4.me : Sexy Combo

This is a nice one!  Effectively skins an existing select box, allows keyboard entry and has good demos and documentation.

Got more?  Let me know and I’ll add them to the list.

Tags: HTML, internet explorer, jQuery, web design, web developer