Download
Demo
- Overview
- Documents
User Rating: 4.8/5 ( 4 votes)
Your Rating:
jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulating HTML selects.
- Keyboard navigation (Up/Down/Left/Right/Word search)
- Easily customizable
- Pretty lightweight (3,4KB minified and less than 2KB minified/gzip)
- Options box always stay visible
- Doesn't rely on external libraries (besides jQuery)
- Word search works with western latin characters set (e.g.: á, ñ, ç...)
Browser support:
- Firefox
- Chrome
- Safari
- Internet Explorer 7+
- Opera
Source: http://lcdsantos.github.io/jQuery-Selectric/
How to use:
Make sure to include jQuery in your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Include jQuery Selectric:
<script src="js/jquery.selectric.min.js"></script>
Put styles in your CSS and change it to your taste :D
/*====================================================================== Selectric ======================================================================*/ .selectricWrapper { position: relative; margin: 0 0 10px; width: 300px; cursor: pointer; } .selectricResponsive { width: 100%; } .selectric { border: 1px solid #DDD; background: #F8F8F8; position: relative; border-radius: 2px; } .selectric .label { display: block; white-space: nowrap; overflow: hidden; margin: 0 30px 0 0; padding: 6px; font-size: 12px; line-height: 18px; color: #444; min-height: 18px; } .selectric .button { display: block; position: absolute; right: 0; top: 0; width: 30px; height: 30px; color: #BBB; text-align: center; font: 0/0 a; /* IE Fix */ *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial; } .selectric .button:after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0; border: 4px solid transparent; border-top-color: #BBB; border-bottom: none; } .selectricHover .selectric { border-color: #CCC; } .selectricHover .selectric .button { color: #888; } .selectricHover .selectric .button:after { border-top-color: #888; } .selectricOpen { z-index: 9999; } .selectricOpen .selectric { border-color: #CCC; background: #F0F0F0; z-index: 9999; } .selectricOpen .selectricItems { display: block; } .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; } .selectricHideSelect { position: relative; overflow: hidden; width: 0; height: 0; } .selectricHideSelect select { position: absolute; left: -100%; display: none; } .selectricInput { position: absolute !important; top: 0 !important; left: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; margin: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; outline: none !important; border: none !important; *font: 0/0 a !important; background: none !important; } .selectricTempShow { position: absolute !important; visibility: hidden !important; display: block !important; } /* Items box */ .selectricItems { display: none; position: absolute; overflow: auto; top: 100%; left: 0; background: #F9F9F9; border: 1px solid #CCC; z-index: 9998; -webkit-box-shadow: 0 0 10px -6px; box-shadow: 0 0 10px -6px; } .selectricItems ul, .selectricItems li { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 20px; min-height: 20px; } .selectricItems li { display: block; padding: 5px; border-top: 1px solid #FFF; border-bottom: 1px solid #EEE; color: #666; cursor: pointer; } .selectricItems li.selected { background: #EFEFEF; color: #444; border-top-color: #E0E0E0; } .selectricItems li:hover { background: #F0F0F0; color: #444; } .selectricItems li.disabled { background: #F5F5F5; color: #BBB; border-top-color: #FAFAFA; cursor: default; }
Initialize jQuery Selectric:
<script> $(function(){ $('select').selectric(); }); </script>
Options:
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">▾</b> | String [HTML] | Markup for open options button |
disableOnMobile | true | Boolean | Initialize plugin on mobile browsers |
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 Selectric and go back to normal $('select').selectric('open'); // Open options $('select').selectric('close'); // Close options