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 <select>, feels like <select>, and quacks like <select>
• 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+

new Celesta(document.getElementById('my_select'));

Or, a little more advanced example:

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 <select> 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 <script>
• Available in npm and bower

This library is still under construction. API methods, option names, event callback interface, CSS classnames etc. can be changed at any time.

• multiple select support
• jQuery plugin
• Make work better with jScrollPane
• UX testing on mobile devices
• (?) Methods call chaining
• (?) Link to source elements, not indexes (benchmarking needed)
• (?) Better feature detection on initialization
• Skin generator

• Significant UI/UX change compared to native selectbox (if you want something "fancier", try Chosen or things like that)

• 0.4.0 (2016-09-30): Add space_key_select param (credits to @garyanikin)
• 0.3.1 (2015-11-05): Minor fix for mobile detection
• 0.3.0 (2015-11-05):
  • Seemless dropdown fallback on mobile devices
  • Source select is moved inside Celesta container (no more kept next to the container)
• 0.2.0 (2015-11-04):
  • Perfect PageUp/PageDown behavior
  • Allow disabled option to be selected initially
• 0.1.0 (2015-10-12): Initial release