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

By Gabriel Celibataire on July 15, 2009 1:38 AM

Ouu thank you for sharing this information :))) I search it from so long and finally I found it :))

By Passkes on July 28, 2009 5:18 AM

Nice way to dress your select boxes!.
Note: your code isn`t 100% compatible with IE6 (selectbox height/padding problem) and IE7 (select items not on top, disappear under your div with the code)

By tomitzel on August 3, 2009 3:27 AM

Great script, maybe you could also do a short tutorial how to use it, tried it, but didn't work for me.

By brandon on August 29, 2009 7:18 PM

Hey!

If I put something after the select box, as in some text, it is automatically put on the line under the select box.

I have a tooltip I want to go right after the select box, but now it is moved to the line before?

I absolutely LOVE the select box, it is great!

Thanks for the help!

By nick on September 12, 2009 4:35 PM

thanks for the great script. just what i am looking for.

a couple of things though ...

if i put a couple of them on the page (one above the other) and open up the top one, i can see the arrow from the bottom select box (coz its z-index is set to 10000). is there a way to correct for this?

also, how would you adapt it to contain an auto scrollbar for long lists (like when putting all the US states in as select options - it tends to expand my page height a bit).

thanks again!

By nick on September 12, 2009 7:49 PM

after the line you change the hidden select box's value:

$(curSel).val(myTarA);

if you add

$(curSel).change();

you allow the onchange condition to be active

By Rahul on October 12, 2009 7:50 AM

Good One..Its really helpful...
Cheers,

By Rahul on October 12, 2009 7:53 AM

By van on February 22, 2010 2:33 AM

Superb Code. Thx!

By Larisa Geisler on March 4, 2010 10:00 PM

Stumbled into this site by chance but I’m sure glad I clicked on that link. You definitely answered all the questions I’ve been dying to answer for some time now. Will definitely come back for more of this. Thank you so much

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

Useful Thoughts

More Thoughts

How to make custom Select Boxes

With Jquery and the Select tag

Update

Comments

Leave a comment