celesta

Celesta
=====
Custom selectbox with look and feel of native one.
(Just see the demo.)

* Pure JavaScript library working on top of native browser selectbox
* Looks like , feels like , and quacks like
* Fully skinnable with CSS (including dropdown)

$3

* IE 10+ (or 9+ with classList polyfill)
* Opera 11.6+
* Safari 5.1.4+
* Firefox 4+
* Chrome 8+
* (?) iOS Safari 6+
* (?) Android Browser 4+ (or 2+ with classList and bind polyfills)
* (?) Opera Mobile 12+
* (?) IE Mobile 10+

$3

``javascript
new Celesta(document.getElementById('my_select'));
`
Or, a little more advanced example:
`javascript
var selectbox = document.querySelector('.some-select');
var celesta = new Celesta(selectbox, {
space_key_open: false,
options_nav_cycling: true,
closed_options_pagekey_jump_by: 5
});

celesta.selectOption(3);

celesta.addEventListener('open', myCallbackFunction);
celesta.open();
celesta.hoverOption(6);
celesta.close();

celesta.refresh();
celesta.destroy();
`

For more advanced usage, see Options,
Methods and Events reference.
Also, you can see the demo.

$3

* Support for optgroups, disabled state, disabled options/groups
* Classname inheritance for select and options
* Element and dropdown fully skinnable with CSS (no hardcoded CSS properties)
* Automatic dropdown reverse to fit browser window viewable area
* Dropdown scrolling:
* native browser way, or
* custom scrollbar libs such as perfect-scrollbar
* Seemless dropdown fallback on mobile devices
* Mouse support:
* Focus with associated label click
* Open with click
* Highlight option with mouse hover
* Select & close with option click
* Close with outer click or outer mousewheel
* Keyboard support:
* Navigatable with Tab
* Open with Space or Enter
* Navigate through options with arrow keys (↑ & ↓), PageUp or PageDown
Find option by keyboard typing* (quicksearch)
* Close with Esc, select & close with Enter
* Interaction:
* Source

remains in DOM
* Option select interaction: Celesta ↔ native select
* Resets value on form reset
* JavaScript API to control Celesta instance
* Events handling with addEventListener
* Falls back to native selectbox if cannot initialize
* Plenty of options to customize UX;
see the demo to play with some of them
* No external library or framework dependencies
* Usage mode: AMD, CommonJS or direct