Custom selectbox with look and feel of native one
npm install celestaCelesta
=====
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)
* 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+
``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.
* 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