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 GitHubFirst, 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(); });
You can use the alphabetical and arrow keys to navigate the list as you would a browser default select.
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')});
//set value $('#setVal').click(function(){ $('#my-dropdown5').getSetSSValue('Sit'); }); //get value $('#getVal').click(function(){ alert('The value is: '+$('#my-dropdown5').getSetSSValue()); });
//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.