jQuery Custom Select Tutorial

View Demo

This is a cool little plugin. Created here >> made better in the comments >> and made easy by me! This plugin allows for multiple select items on the same page, and each can be styled differently as well! Note: If you need more than one select on the same page, simply feed the select a different id before the underscore in the CSS. The underscore, and what comes after it, remains the same (e.g. #customselect_iconselect and #customselect2_iconselect). Also, the title attribute puts in the selects default value. The script handles the rest!

In this order...

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery customselect plugin.

Step 3: Fire the jQuery customselect plugin.

$(document).ready(function() { 
   $('#customselect').SelectCustomizer(); 
});

Step 4: jQuery customselect CSS.

#login {
position:relative;
float:left;
}
#login select {
width:110px;
} 
/* -------------- CustomSelect --------------*/
#customselect_iconselect {
background:url(customselect.jpg) no-repeat;
height:17px;
width:89px;
padding:13px;
margin:13px 0 0 -1px;
font:13px Arial, Helvetica, sans-serif;
float:left;
cursor:pointer;	
}
#customselect_iconselect:hover, #customselect_iconselect:focus {
background-position:0 -43px;
}
#customselect_holder {
width:100px;
overflow:auto;
display:none;
position:absolute;
top:66px; 
left:5px; 
background:#fff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-moz-box-shadow:0 0 6px #888;
-webkit-box-shadow:0 0 6px #888;
box-shadow:0 0 8px #888;
border:2px solid #aaa;
}
#customselect_holder .selectitems {
width:95px;
padding:1px 0 1px 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#customselect_holder .hoverclass {
background:#ccc;
cursor:pointer;
}
#customselect_holder .selectedclass {
background:#ccc;
}

Step 5: jQuery customselect HTML.

<form id="login" method="post" action="">
   <select name="lang" id="customselect" title="English">
     <option value="en">English</option>
     <option value="de">Deutsch</option>
     <option value="es">Español</option>
     <option value="fr">Français</option>
     <option value="it">Italiano</option>
     <option value="nl">Nederlands</option>
     <option value="no">Norsk</option>
     <option value="pt">Português</option>
   </select>
</form>

ADVERTISE HERE