Simple jQuery Based Replacement For Select Boxes - udselect
File Size: | 28.8 KB |
---|---|
Views Total: | 1806 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
udselect is a simple light-weight jQuery plugin which adds custom styles to default select
box with CSS and Font Awesome icons.
How to use it:
1. Load jQuery library and the jQuery udselect plugin in the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="src/jquery.udselect.js"></script>
2. Include the udselect.css
for basic select styles. You can also modify or override the styles to your needs.
.udselect { background: #ffffff; border: 1px solid #ACC0CA; border-radius: 4px; color: #000000; padding-right: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .udselect span.udselect-extension { color: #ffffff; background: #ACC0CA; height: 100%; display: block; position: absolute; top: 0; right: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-left: 7px; padding-right: 14px; } .udselect span.udselect-extension .fa { margin-left: -15px; }
3. Load Font Awesome 4 for dropdown icons.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
4. Call the plugin on the existing select
boxes and done.
$('select').udselect(});
5. More customization options.
$('select').udselect({ /** * Width of the box, default is 100% for responsiveness. */ width: '100%', /** * Static height in pixles. Ex. 32px. */ height: '38px', /** * Default <select> CSS. */ selectCss: { 'z-index':'10', 'position':'relative', 'opacity':0, '-khtml-appearance':'none', '-webkit-appearance': 'menulist-button' }, /** * Default <span> CSS. */ spanCss: { 'z-index':'1', 'position':'absolute', 'bottom':'0', 'left':'0', 'text-indent':'10px', 'cursor':'default', 'overflow': 'hidden', 'word-break': 'break-all' }, /** * Callback function. */ spanElementCallback: function (title) { return '<span class="udselect"><span class="udselect-text">' + title + '</span><span class="udselect-extension"><span class="fa fa-chevron-down"></span></span></span>'; } });
This awesome jQuery plugin is developed by peec. For more Advanced Usages, please check the demo page or visit the official website.