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.

Demo:

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:

Click Here to Download the jQuery Plugin

Usage:

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

.customStyleSelectBox {
/* Styles For Your Select Box */
}

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

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right;
}