shayzalman / stylish-select

A jQuery Stylish select

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.

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.

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());  });              

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.

Max-height for large lists

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

Intelligent positioning

Stylish Select will always remain visible on the page.

stylish-select's Issues

nextFormElement breaks when multiple stylish-selects are on the same page

Hi, we have a problem when we have Country and State dropdowns in the same form. The tabbing breaks when it hits nextFormElement. It is like it puts focus on itself (the first DD), not the next one.