Simple jQuery Plugin For Select Option Dropdown List Replacement - Simple Selectbox

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.