jQuery Selectric

How to use

1. Make sure to include jQuery in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/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

/*======================================================================
  Selectric
======================================================================*/
.selectricWrapper { position: relative; margin: 0 0 10px; width: 300px; cursor: pointer; }
.selectricDisabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.selectricOpen { z-index: 9999; }
.selectricHideSelect { position: relative; overflow: hidden; }
.selectricHideSelect select { position: absolute; left: -100%; }
.selectric { border: 1px solid #DDD; background: #F8F8F8; position: relative; border-radius: 2px; }
.selectricOpen .selectric { border-color: #CCC; background: #F0F0F0; z-index: 9999; }
.selectric .label { display: block; white-space: nowrap; overflow: hidden; margin: 0 30px 0 0; padding: 6px; font-size: 12px; line-height: 1.5; color: #444; }
.selectric .button { position: absolute; right: 0; top: 0; height: 30px; width: 30px; color: #BBB; text-align: center; font: normal 18px/30px sans-serif; }
.selectricHover .selectric { border-color: #CCC; }
.selectricHover .selectric .button { color: #888; }
.selectricTempShow { position: absolute !important; visibility: hidden !important; display: block !important; }

/* Items box */
.selectricItems ul,
.selectricItems li { list-style: none; padding: 0; margin: 0; min-height: 20px; line-height: 20px; font-size: 12px; }
.selectricItems { display: none; position: absolute; overflow: auto; top: 100%; left: 0; background: #F9F9F9; border: 1px solid #CCC; z-index: 9998; box-shadow: 0 0 10px -6px; }
.selectricItems li { padding: 5px; cursor: pointer; display: block; border-bottom: 1px solid #EEE; color: #666; border-top: 1px solid #FFF; }
.selectricItems li.selected { background: #EFEFEF; color: #444; border-top-color: #E0E0E0; }
.selectricItems li:hover { background: #F0F0F0; color: #444; }

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
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">▾</b>	String [HTML]	Markup for open options button
disableOnMobile	true	Boolean	Initialize plugin on mobile browsers
border	1	Integer	Options box border thickness

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

Firefox
Chrome
Safari
Internet Explorer 7+
Opera

Demo

Project maintained by Leonardo Santos
Github • Twitter • Email