I have released a new jQuery plugin that allows you to style the standard <select> form element with CSS so that it looks the same in all major browsers.

View Demo

Checkout the latest source on GitHub

Tested and works with:

Firefox 3.0, Firefox2.0, Chrome 3, Safari 4, IE8, IE7, IE6

Why?

Because sometimes the browser default form styles look ugly with the rest of your site and <select> elements are notoriously difficult to style with CSS. You can see how wildly different <select> elements can look in different browsers with the same CSS applied here.

The IE6 issue(s)

IE6 has a nasty habit of always displaying <select> elements on top of any other content, regardless of any z-index. This can be very annoying when using JavaScript overlays, drop down navigation etc. The only way around this issue is to use the iframe shim technique which places an iframe around the content that needs to appear above the <select>.

Then there’s that other issue of not being able to set a width on <select> elements without clipping off any options wider than the set width.

While workarounds do exist for these issues, I wanted to create a drop down menu that worked exactly the same in every browser and did away with these IE6 oddities.

So how does it work?

Stylish Select basically grabs all of the options from your select menu, puts them into an unordered list and hides the original <select>. This unordered list is then made interactive, so that it functions like a browser native <select>. When you click on or navigate through the list with the keyboard, it updates the <select> in the background, so that when you submit your form, it is just like you were using the original <select>.

This newly created <select> now has the flexibility to be styled in whatever way you choose.

Alot of work has been done to make the newly created <select> to function like the original browser default. The plugin offers the following features:

Supports keyboard navigation including alpha-numerical keys
If the <select> is at the bottom of the screen, the drop down menu stays on the screen
Support for grouped options with <optgroup>
If a value is selected, the new select menu shows this option as selected

You can invoke the plugin on any <optgroup> with the following method:

$(‘.my-dropdown’).sSelect();

View Demo