Home

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.

A lot 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

How Do I Use It?
You can invoke the plugin on any select element with the following method:
$('.my-dropdown').sSelect();

Sometimes you need to update the original select list via AJAX. In these cases, you can update the stylized select by issuing the following statement:
$('.my-dropdown').resetSS();

To use a scrolling, fixed-height drop-down on the list, set ddMaxHeight in the options object:
$('.my-dropdown').sSelect({ddMaxHeight: '200px'});