JavaScript StyleSelect (jQuery Plugin)

The select element cannot be styled using CSS. Different platforms and diferent browsers show this element in very different ways; some properties can be sometimes modified, some can't. This is why it shouldn't be styled at all. But sometimes a specific design of the select element is needed, and jQuery can help in this case.

There are several jQuery plugins designed to replace the select. In common, they replace the original HTML element with a set of DIVs or an UL list, while adding all the machinery to simulate the select's behavior. Unfortunatelly, this behavior differs among platforms, and there is always at least one feature the simulated „select“ can't handle (e.g. mouseover/mouseout delays, collapse on clicking outside the element, displaying the menu within the scroll area etc.). So I decided to do it another way.

I'm using the technique (can be also found here) where only the visibible static part odf the SELECT is replaced, while its content including all the select mechanism is kept:

1. The original SELECT is wrapped into a SPAN styled as inline-block with position:relative, the width of the original SELECT is assigned to it.
2. Another SPAN is added as SELECT's sibling, styled as a block, replacing the original element
3. The SELECT itself has position: absolute and, with zeroed opacity, is placed above the newly added boxes.

This causes a styleable box appears instead of the original SELECT, and the full-featured dropdown content stays available on click. See the example. The usage is simple:

jQuery('select').styledSelect( options )

See plugin source code or the example and its source code for more details.

Download: version 1.1 (02/05/2009)

Change log:

• 1.1 – Firefox 2 and older disabled due to formatting bug (wrong support of inline-block)