Simple jQuery Plugin To Beautify Your Select Boxes - selectskin

File Size: 11.9KB
Views Total: 4009
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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=""></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

<option value=""></option>
<option value=""></option>
<option value=""></option>

4. Call the plugin

<script type="text/javascript">
        $(function() {

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.