Standalone - runs on its own without any dependencies. If you're using vanilla JS and want to style a select box, you've come to the right place.
Correct - Triggers 'change' events on real select boxes so you won't have to modify your existing event listeners.
Usable with the keyboard - Appears in tab index, space shows and hides the options, up and down arrow changes the highlight option, enter selects the currently highlighted option.
Fully styled, and designed to be customised - There are a number of CSS-only ways to style a select box, but these don't style the drop down options, just the current selection - StyleSelect styles everything. StyleSelect is designed for easy incorporation into your own look and feel, uses SCSS, and is free of magic numbers, CSS 'triangles', images, and other hacks.
Accessable - people using screen readers simply experience the regular, unstyled select box.
StyleSelect was made when looking for a modern equivalent of Chosen and Selectize for a project where jQuery wasn't used.
Demo
So we've included `styleselect.scss` in our SASS and loaded the AMD module. To style a select box, just run `styleSelect` with a CSS-style selector:
styleSelect('select.some-class');
That's all. Here's one we just made:
Simple. From here on you'll probably want to open styleselect.scss and tweak styling.
Style Select originally began as a fork of VisualSelect - Style Select adds significant bugfixes, entirely new SASS, and docs. The license has also been changed from WTFPL to the MIT license.
