Stylish Select 0.4.1

A cross-browser, accessible alternative to the standard form element which can be fully customised with CSS

Stylish Select attempts to replicate the functionality of the browser default select box as closely as possible with support for keyboard navigation, and intelligent positioning.

Stylish Select aims to have a minimal code footprint and weighs in at just over 3KB when minified.

Stylish Select blog post

Download source code (version 0.4.1)

Usage

First, include the stylesheet, jQuery and the stylish select .js file in your html head tag

The plugin can be used to replace any select with the following:

$(document).ready(function(){
	$('#my-dropdown').sSelect();
});

Simplest example, option selected by default

You can use the alphabetical and arrow keys to navigate the list as you would a browser default select.

Change event

Stylish Select alters the original select on the page, so you can access it's change event:

//change event
$('#my-dropdownChange').sSelect().change(function(){alert('changed')});

Grouped options

Stylish Select supports optgroups.

Windows XP style

The Stylish Select can be styled with CSS in whatever way you like.

Getting/setting the value

//set value
$('#setVal').click(function(){
	$('#my-dropdown5').getSetSSValue('Sit');
});

//get value
$('#getVal').click(function(){
	alert('The value is: '+$('#my-dropdown5').getSetSSValue());
});

Set text to "Sit"

Get value

Add new options to Stylish Select

//add options to select and update
$('#addOptions').click(function(){
	$('#my-dropdown6').append('').resetSS();
});

If you add or remove options from the initial select element on the page, be sure to call the .resetSS() method on the select to update the Stylish Select replacement.

Add new options to select and update

Max-height for large lists

$('#my-dropdown').sSelect({{ddMaxHeight: '300px'}});

Intelligent positioning

Stylish Select will always remain visible on the page.