SelectCustomizer
This is a jQuery plug-in for select fields customization in all browsers.
UPDATED (7/9/2010): now you can use the selected attribute to entitle the select group, instead of using the title attribute.
As all of you know, the <select> input type of a form isn’t easy to customize with CSS, and of course, each browser render it in a different way.
This script replace the original <select> input with a hidden field (with the same name) and a bunch of divs and span. When the user select an option, the hidden field catch that value and passes it as a normal field of a form.
If JavaScript is disabled a classic select option list is shown.
Example:
This script was taken from Adelaide Webdesigns, but the original script allowed only one select to be customized. My modifications (in collaboration with Michele) allow to customize as many select as you want.
Download the necessary files and tutorial.
The code:
[javascript]$.fn.SelectCustomizer = function(){
// 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
// 1.2: added the selected option
return this.each(function(){
var obj = $(this);
var name = obj.attr(‘id’);
var id_slc_options = name+’_options’;
var id_icn_select = name+’_iconselect’;
var id_holder = name+’_holder’;
var custom_select = name+’_customselect’;
var select_title = obj.find(‘option[selected]’).html();
obj.after("<div id=\""+id_slc_options+"\"> </div>");
obj.find(‘option’).each(function(i){
var thisisselected = $(this).attr(‘selected’)?’ selectedclass’:”;
$("#"+id_slc_options).append("<div title=\"" + $(this).attr("value") + "\" class=\"selectitems"+ thisisselected +"\"><span>" + $(this).html() + "</span></div>");
});
obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + select_title + "</div><div id=\""+id_holder+"\"> </div>").remove();
$("#"+id_icn_select).click(function(){
$("#"+id_holder).slideToggle(200);
});
$("#"+id_holder).append($("#"+id_slc_options)[0]);
$("#"+id_holder+ " .selectitems").mouseover(function(){
$(this).addClass("hoverclass");
});
$("#"+id_holder+" .selectitems").mouseout(function(){
$(this).removeClass("hoverclass");
});
$("#"+id_holder+" .selectitems").click(function(){
$("#"+id_holder+" .selectedclass").removeClass("selectedclass");
$(this).addClass("selectedclass");
var thisselection = $(this).html();
$("#"+custom_select).val(this.title);
$("#"+id_icn_select).html(thisselection);
$("#"+id_holder).slideToggle(250)
});
});
}[/javascript]
A simple guide can be found here: SelectCustomizer.
This script is under the Creative Commons BY-SA license.
