jquery.customSelect.css

div.customselect {
    position: relative;
    display: block;
    width: 240px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    z-index: 100;
    background: #F2FFDC;
    color: #333;
    padding: 0;
}
div.customselect.visible {
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    
}
div.customselect .iconselect {
    cursor: pointer;
    padding: 2px 5px;
    height: 20px;
}
div.customselect .iconselect.prompt-visible {
    opacity: 0.8;
}
div.customselect .selectwrapper {
	display:none;
	position: absolute;
	top: 24px;
	width: 100%;
}
div.customselect .selectwrapper .optionswrapper {
	height: auto;
	margin: 0;
    background: #F2FFDC;
	padding: 0 0 5px 0;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
div.customselect .selectwrapper .selectitems {
	z-index: 10000;
	cursor: default;
	padding: 0 5px;
	height: 25px;
	line-height: 25px;
    text-transform: none;
    color: #666;
}
div.customselect .selectwrapper .last {}
div.customselect .selectfooter {
    display: none;
}
div.customselect .selectwrapper .selectitems.hoverclass,
div.customselect .selectwrapper .selectitems.selectedclass{
    color: #000;
    cursor: pointer;
}
div.customselect.error {
    border: 1px solid red;
}

jquery.customSelect.js

/*

Usage:


    $('select.custom').customSelect({
        required: true, // default is false
        titleprompt: false // default is true
    });
    
    
*/

$.fn.customSelect = (function(userOptions){
    // Select Customizer jQuery plug-in
    // based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
    // modified by David Vian http://www.ildavid.com/dblog
    // and then modified AGAIN be Dean Collins http://www.dblog.com.au
    // tidied up by Greg Brown 2010 http://gregbrown.co.nz/
    
    var options = {
        required: false,
        titleprompt: true
    };
    $.extend(options, userOptions);


    
    currently_open = [];
    function clear_currently_open() {
        for (var i = 0; i < currently_open.length; i++) {
            currently_open[i].css('zIndex', 1).find('.selectwrapper').fadeOut(200);
            currently_open[i].parent().css('zIndex', 1);
        }
        currently_open = [];
    };
    
    return this.each(function(){
        var me = $(this);
        var name = me.attr('id');
        var container = $('<div>').addClass('customselect');
        var hidden_input = $('<input type="hidden" value="' + me.val() + '" name="' + this.name + '">');
        
        
        me.after(container);
        
        container.append(hidden_input);
        container.append('<div class="iconselect">' + $(this).find(':selected').text() + '</div>');
        container.append($('<div>').addClass('selectwrapper'));

        var holder = container.find('.selectwrapper');

        holder.append($('<div>').addClass('optionswrapper'));


        me.find('option').each(function(i, item){
            if (i === 0 && !$(this).attr("value") && options.required && !options.titleprompt) {
                container.find('.iconselect').html($(this).html()).addClass('prompt-visible');
            }
            else {
                holder.find('.optionswrapper').append('<div title="' + $(this).attr("value") + '" class="selectitems"><span>' + $(this).html() + '</span></div>');
            }
        });
        
       
        if (options.titleprompt && !$(this).find(':selected').attr('value')) {
            container.find('.iconselect').html(me.attr('title')).addClass('prompt-visible');
        }
        me.remove();

        function show(holder, e) {
            var hideThis = function() {
                container.parent().css({zIndex: 1});
                container.css({
                    zIndex: 1
                })
                holder.fadeOut(200);
                $('body').unbind('click', hideThis);
                container.removeClass('visible');
            };
            
            if(holder.css('display') == 'none') {
                clear_currently_open();
                container.addClass('visible');
                
                holder.fadeIn(200);
                holder.focus();
                container.css({
                    zIndex: 2000,
                    position: 'relative'
                });
                container.parent().css({
                    zIndex: 2000
                })
                
                if (e) {
                    e.stopPropagation();
                }
                
                currently_open.push(container);
                
                $('body').click(hideThis);
            } else {
                hideThis();
            }
        };
        
        container.find('.iconselect').click(function(e){
            show(holder, e);
        });
        
        holder.append('<div class="selectfooter"></div>');
        holder.find('.optionswrapper > div:last').addClass("last");
        container.find(".selectwrapper .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        container.find(".selectwrapper .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        container.find(".selectwrapper .selectitems").click(function(){
            holder.find(".selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            hidden_input.val(this.title);
            hidden_input.change();
            if (options.titleprompt) {
                if (this.title) {
                    container.find('.iconselect').html(thisselection).removeClass('prompt-visible');
                }
                else {
                    container.find('.iconselect').html(me.attr('title')).addClass('prompt-visible');
                }
            }
            else {
                container.find('.iconselect').html(thisselection).removeClass('prompt-visible');
            }
            holder.fadeOut(250);

        });
    });
});