Stylish Select 0.4.9

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.

Get latest source code from GitHub

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 and also optgroups and options together.

Getting/setting the value

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

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

Set value to 4

Get value

Add new options to Stylish Select

//add options to select and update
$('#addOptions').click(function(){
$('#my-dropdown6').append('<option value="newOpt">New Option</option>').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.

Disabled Select

Disabled Options

Disabled Grouped options