Themeable Html Select Box Replacement – select.js

Preview:

Description:

select.js is a javascript library for styling the standard HTML select elements with CSS and javascript.

3 built-in themes:

• Default
• Dark
• Chosen

How to use it:

Choose and include a theme CSS in the header.

<link rel="stylesheet" href="css/select-theme-default.css" />

Create a standard html select box.

<select class="demo">
<option value="">Select a country...</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
...
</select>

Include necessary javascript library files at the bottom of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="select.js"></script>

Initialize the plugin with options.

<script>
$('select.demo').each(function(){
new Select({
el: this
});
});
</script>

Options.

<script>
$('select.demo').each(function(){
new Select({
el: this,
className: 'select-theme-dark', // or select-theme-chosen
useNative: false, // By default, select fallsback to opening the native browser select on touch devices which are less than or equal to 640px in either height or width.
alignToHighlighted: 'never' // Select has an option called alignToHighlighted which allows you to change whether the drop is positioned like a real select element (with the currently selected option over the element) or like a canonical dropdown menu.
});
});
</script>

Changelog:

01/12/2016

• Bugfix