Custom Select Box CSS Style Plugin: jQuery + CSS

This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This concept is based on Ryan Fait's method of styling select boxes, but as a jQuery Plugin.

Demo:

Unstyled: Styled:

Notes:

This technique will not work for browsers IE6 and older, but rather safely and cleanly degrades to default styling for those select boxes.

Download from github:

Click here to download the production-ready, minified jQuery Plugin

Click here to download the uncompressed jQuery Plugin

Usage:

Javascript:

$(document).ready(function(){
	$('.mySelectBoxClass').customSelect();
});

CSS:

.customSelect {
/* Styles For Your Select Box */
position: relative;
}


.customSelect.changed {
/* You can use this if you want a different style after user has made a selection */
}

.customSelectFocus {
/* You can use this if you want a different style after user has made a selection */
}

.customSelectOpen {
/* You can use this if you want a different style after user has made a selection */
}


/* We can style the inner box, too */
.customSelectInner {
background:url(canvas-list-nav-item-arrow.gif) no-repeat center right;
}

Fork on github:

jquery.customSelect on github