jQuery Selectric Selectric ⚡

Fast, simple and light jQuery plugin
to customize HTML selects

Demos View on Github Download (ZIP) Download (TAR)
jquery.selectric.js jquery.selectric.min.js

How to use

1. Make sure to include jQuery in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include jQuery Selectric:

<script src="js/jquery.selectric.min.js"></script>

3. Put styles in your CSS and change it to your taste :D (please refer to our demo page for more themes and other customizations)



		

4. Initialize jQuery Selectric:

$(function(){
	$('select').selectric();
});

Options

You can pass an options object as the first parameter when you call the plugin. For example:

$('select').selectric({
	maxHeight: 200
});
Option Default Type Description
onOpen
function() {}
Function Function called when select options open
onChange
function() {}
Function Function called when select options change
onClose
function() {}
Function Function called when select options close
maxHeight
300
Integer Maximum height options box can be
keySearchTimeout
500
Integer After this time without pressing any key, the search string is reset
arrowButtonMarkup
<b class="button">&#9662;</b>
String [HTML] Markup for open options button
disableOnMobile
true
Boolean Initialize plugin on mobile browsers
openOnHover
false
Boolean Open select box on hover, instead of click
expandToItemText
false
Boolean Expand options box past wrapper
responsive
false
Boolean The select element become responsive
customClass
{ 
prefix: 'selectric',
postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive',
camelCase: true
}
Object Custom classes.
Every class in 'postfixes' should be separate with a space and follow this exact order: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive'
optionsItemBuilder
'{text}'
String or Function Define how each option should be rendered inside its <li> element.

If it's a string, all keys wrapped in brackets will be replaced by the respective values in itemData. Available keys are: 'value', 'text', 'slug', 'disabled'.

If it's a function, it will be called with the following parameters: (itemData, element, index). The function must return a string, no keys will be replaced in this method.
preventWindowScroll
true
Boolean Prevent scroll on window when using mouse wheel inside options box to match common browsers behavior.

Public methods

$('select').selectric('open');    // Open options
$('select').selectric('close');   // Close options
$('select').selectric('destroy'); // Destroy select and go back to normal
$('select').selectric('refresh'); // Reconstruct the plugin options box
$('select').selectric('init');    // Reinitialize the plugin

// Or...
var Selectric = $('select').data('selectric');

Selectric.open();    // Open options
Selectric.close();   // Close options
Selectric.destroy(); // Destroy select and go back to normal
Selectric.refresh(); // Reconstruct the plugin options box
Selectric.init();    // Reinitialize the plugin

Browser support

Basic demo

view more advanced demos and customization →

Project maintained by Leonardo Santos
GithubTwitterEmail

Hosted on GitHub Pages