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.0/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 a options object as the first parameters when you call the plugin. For example:

$('select').selectric({
	maxHeight: 200
});
Option Default Type Description
onOpen function() {} Function Function called when select options is opened
onChange function() {} Function Function called when select options is changed
onClose function() {} Function Function called when select options is closed
maxHeight 300 Integer Maximum height options box can be
keySearchTimeout 500 Integer After this time without pressing any key, the search string is reseted
arrowButtonMarkup <b class="button">&#9662;</b> String [HTML] Markup for open options button
disableOnMobile true Boolean Initialize plugin on mobile browsers
margin 5 Integer Minimum space between opened options and window
border 1 Integer Options box border thickness
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

Public methods

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

Browser support

Basic demo

view more advanced demos and customization →



Project maintained by Leonardo Santos
GithubTwitterEmail

Hosted on GitHub Pages