Simple jQuery Plugin For Select Option Dropdown List Replacement - Simple Selectbox
File Size: | 44.2 KB |
---|---|
Views Total: | 6542 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Simple Selectbox is a minimalist jQuery select
replacement for creating customizable & stylable option dropdown list with smooth transition effect.
How to use it:
1. Load the latest jQuery library and jQuery simple selectbox plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.simple.select.js"></script>
2. Create a standard Html select dropdown list.
<select> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> ... </select>
3. Style the select dropdown list via CSS.
select { display: none; } .select { position: relative; z-index: 99; margin: 0px 0px 20px 0px; width: 200px; } .select .active-option { background: #111; color: #fff; -webkit-transition: all 0.3s 0s ease-in-out; -moz-transition: all 0.3s 0s ease-in-out; -ms-transition: all 0.3s 0s ease-in-out; -o-transition: all 0.3s 0s ease-in-out; transition: all 0.3s 0s ease-in-out; } .select .active-option:before { content: ""; width: 0; height: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 6px solid #fff; position: absolute; right: 10px; top: 50%; margin-top: -5px; } .select .active-option:hover { background: #434343; } .select .option-list { color: #fff; } .select .option-list li { background: #ABABAD; margin-top: 2px; } .select .option-list li:hover { background: #979799; } .active-option { padding: 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; } .option-list { width: 100%; position: absolute; visibility: hidden; overflow-y: scroll; overflow-x: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; top: 90%; opacity: 0; filter: alpha(opacity=0); } .option-list li { width: 100%; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .option-list.show { -webkit-transition: all 0.3s 0s ease-in-out; -moz-transition: all 0.3s 0s ease-in-out; -ms-transition: all 0.3s 0s ease-in-out; -o-transition: all 0.3s 0s ease-in-out; transition: all 0.3s 0s ease-in-out; top: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; }
4. Initialize the plugin.
$(document).ready(function() { $('select').selectBoxes({ maxHeight : 200 // the maximum height of the dropdown list }); }); }); $(app.init);
Change log:
2014-02-02
- update.
This awesome jQuery plugin is developed by StuartRayson. For more Advanced Usages, please check the demo page or visit the official website.