Minimal jQuery Select Box Replacement Plugin - Super Select

Super Select is a simple and fast jQuery plugin that replaces the standard select drop down list to a styleable and customizable select box.

Basic Usage:

1. Include jQuery javascript library and jQuery Super Select plugin in the bottom of your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../jquery.superselect.js"></script> 

2. Create a standard html select box

<select id="demo">
<option value="1">Apple (1)</option>
<option>Banana
<option>Cherry
<option>Date</option>
<option>Elephant Apple</option>
<option value="6">Fig (6)</option>
<option value="7">Grapefruit (7)
<option>Honeydew</option>
<option>Ice Cream Bean</option>
<option>Indian Prune</option>
<option>Jackfruit</option>
</select>

3. The CSS

.superselect-select {
position: absolute;
}
.superselect-anchor {
display: inline-block;
 *display: inline;
position: relative;
 *zoom: 1;
}
.superselect-wrap {
background: url(images/superselect-gradient.png) repeat top left;
border: 1px solid #c2cbc2;
border-radius: 3px;
color: #666;
cursor: pointer;
font-size: 17px;
height: 38px;
line-height: 38px;
outline: none;
}
.superselect-wrap .superselect-current {
font-weight: lighter;
height: 100%;
overflow: hidden;
padding: 0 0 0 8px;
position: relative;
white-space: nowrap;
}
.superselect-wrap .superselect-current .superselect-right-image {
background: url(images/superselect-arrow.png) no-repeat right center;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 52px;
}
select {
outline: none !important;
margin: 0;
}

4. Call the plugin

<script>
$(function() {
$( '#demo' ).superselect({
size: 10
});
});
</script>

---

This awesome jQuery plugin is developed by kokarn. For more Advanced Usages, please check the demo page or visit the official website.