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.
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.
1. Another SPAN is added as SELECT’s sibling, styled as a `block`, replacing the original element
1. 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”:[/files/jquery.styledselect/]. The usage is simple:
jQuery(’select’).styledSelect( options )
See “plugin source code”:[/files/jquery.styledselect/jquery.styledselect.js] or “the example”:[/files/jquery.styledselect/] and its source code for more details.
**Download:** “version 1.1″:[/files/jquery.styledselect/jquery.styledselect.js] (02/05/2009)
=== Change log: ===
- 1.1 – Firefox 2 and older disabled due to formatting bug (wrong support of inline-block)