Gerren Design

Making forms look good is often one of the most challenging parts of being a web designer. Select boxes specifically are very difficult. They look completely different in different browsers. Lucky, there are plenty of ways to replace them with hidden input fields. However, recently I've had to deal with 3rd party custom tags that generate dynamic select boxes. The only way to style these is by allowing them to load and then use the DOM to manipulate or replace them. I couldn't find any example of his online, so I was forced to figure out how to do it myself. I hope the code below will help someone else out.

Sample:

The code:

$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
	
	var curSel = $(this);
	// get the CSS width from the original select box
	var gddWidth = $(curSel).css('width');
	var gddWidthL = gddWidth.slice(0,-2);
	var gddWidth2 = gddWidthL - 28;
	var gddWidth3 = gddWidthL - 16;
	// build the new div structure
	var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
	//get the default selected option
	var whatSelected = $(curSel).children('option:selected').text();
	//write the default
	var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 +  'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
	// create a new array of div options from the original's options
	var addItems = new Array();      
	$(curSel).children('option').each( function() {           
		var text = $(this).text();  
		var selVal = $(this).attr('value'); 
		var before =  '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + gddWidth3 + 'px;">';
		var after = '</a></li>';           
		addItems.push(before + text + after);
	});
	//hide the default from the list of options 
	var removeFirst = addItems.shift();
	// create the end of the div selectbox and close everything off
	var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
	//write everything after each selectbox
	var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
	$(curSel).after(GDD);
	//this var selects the div select box directly after each of the origials
	var nGDD = $(curSel).next('div.selectME');
	
	$(nGDD).find('li:first').addClass("first");
	
	$(nGDD).find('li:last').addClass('last');
	//handle the on click functions - push results back to old text box
	$(nGDD).click( function(e) {
		 var myTarA = $(e.target).attr('rel');
		 var myTarT = $(e.target).text();
		 var myTar = $(e.target);
		 //if closed, then open
		 if( $(nGDD).find('li').css('display') == 'none')
			{
					//this next line closes any other selectboxes that might be open
					$('div.selectME').find('li').css('display','none');
					$(nGDD).find('li').css('display','block');
					
					//if user clicks off of the div select box, then shut the whole thing down
					$(document.window || 'body').click( function(f) {
							var myTar2 = $(f.target);
							if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
					});
							return false;
			}
			else
			{      
					if (myTarA == null){
						$(nGDD).find('li').css('display','none');
								return false;
							}
							else {
								//set the value of the old select box
								$(curSel).val(myTarA);
								//set the text of the new one
								 $(nGDD).find('span.gselected').text(myTarT);
								 $(nGDD).find('li').css('display','none');
								 return false;
							}
			}
	//handle the tab index functions
	 }).focus( function(e) {

$(nGDD).find('li:first').addClass('currentDD');
		 $(nGDD).find('li:last').addClass('lastDD');
		 function checkKey(e){
			//on keypress handle functions
			function moveDown() {
				var current = $(nGDD).find('.currentDD:first');
				var next = $(nGDD).find('.currentDD').next();
				if ($(current).is('.lastDD')){
				return false;
				} else {
					$(next).addClass('currentDD');
					$(current).removeClass('currentDD');
				}
			}
			function moveUp() {
				var current = $(nGDD).find('.currentDD:first');
				var prev = $(nGDD).find('.currentDD').prev();
				if ($(current).is('.first')){
				return false;
				} else {
					$(prev).addClass('currentDD');
					$(current).removeClass('currentDD');
				}
			}
			var curText = $(nGDD).find('.currentDD:first').text();
			var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
		   switch (e.keyCode) {
				case 40:
					$(curSel).val(curVal);
					$(nGDD).find('span.gselected').text(curText);
					moveDown();
					return false;
					break;
				case 38:
					$(curSel).val(curVal);
					$(nGDD).find('span.gselected').text(curText);
					moveUp();
					return false;
					break;
				case 13:
					$(nGDD).find('li').css('display','none');
					}     
		}
		$(document).keydown(checkKey);	
	}).blur( function() {
			$(document).unbind('keydown');
	});
});
});

Update

8-4-2009

I've made a few improvements to the script based on user feed back and created a demo that you can now download;

Download the Jquery Select Box Demo

Gerren Design

Gerren Rabideau

Illustrator

Coder

uber-geek

illustration artwork

web design

web designer

paint

watercolor fantasy and sci-fi illustrations

comic books, traveling, color theory, how much IE sucks

Friends

Neat Links

Useful Thoughts

More Thoughts

Previous Thoughts

Galvanized to paint

My first finished(?) watercolor illustration in over a year

Scud: The Disposable Assassin

The non-disposable ending to an amazing comic book

How to make custom Select Boxes

With Jquery and the Select tag

Update