Simple jQuery Plugin To Beautify Your Select Boxes - selectskin

selectskin is a jquery plugin to simply apply a customizable skin to the standard html select drop down box.

You might also like:

• Form Select Element Replacement Plugin  - Mighty Form Styler
• Default Checkbox Replacement Plugin - jQuery prettyCheckable
• Standard Select Form Replacement Plugin - Selectik
• Select Boxes Replacement Plugin - Select2
• jQuery Plugin For Custom Select Menus
• jQuery Multiple Select Element Replacement Plugin - selectlist
• Beautiful Select Element Replacement Solution with jQuery and CSS3
• Simple Stylizable Select Input Plugin with jQuery - Brute Select
• jQuery Plugin For Customizable Select Box - selectify

How to use it:

1. Include the latest jQuery library and selectskin.js in the head section of your page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../src/jquery.selectskin.js"></script>

2. The CSS

.select-skin {
width: 200px;
position: relative;
}
.select-skin select {
width: 100%;
height: 100%;
float: none;
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
-webkit-appearance: menulist-button;
}
.select-skin-mask {
width: 100%;
background: #333;
}
.select-skin-text {
width: 9999px;
padding: 5px 10px;
line-height: 1em;
font-size: 1em;
}
.select-skin-text-clip {
margin-right: 35px;
overflow: hidden;
background: #999;
}

3. The HTML

<select>
<option value="jQuery.com">jQuery.com</option>
<option value="google.com">google.com</option>
<option value="jQueryscript.net">jQueryscript.net</option>
...
</select>

4. Call the plugin

<script type="text/javascript">
        $(function() {
           $('select').SelectSkin();
        });
</script>

Change log:

v2.0.3 (2013-09-01)

updated to the latest version

---

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