Create a Custom Select Box with jQuery

by in Tutorials on 20th Jun 2012 · Comments

In this tutorial I will be teaching you how to transform boring select boxes into well styled form elements that are perfect for custom web applications. Using custom form elements such as select boxes can give your website a unique feel and make it stand out from the crowd.

By the end of the tutorial you will have a fully functioning custom select box.

Create a Custom Select Box with jQuery


The HTML Code

Firstly lets go over the HTML required for a normal select box. As you probably know a select box is comprised of a main container inside which contains each select option.

<select>
	<option></option>
	<option></option>
	<option></option>
</select>

Now in order to create our custom select box we need to duplicate this HTML structure using div and span elements. Lets go build up the structure from the outside in.

In the normal select box the outer wrapper is a select tag this can be easily replicated by using a couple of div and span tags as below:

<div class='selectBox'>
	<span class='selected'></span>
	<span class='selectArrow'>&#9660</span>
</div>

As you can see we now have the first blocks of our select box. This is made up of an outer div containing two span elements. One is to display the current option text and the other is to mimic the drop down arrow button you commonly see. Each tag for select will be given it's own CSS class in order for jQuery to identify it and for us to give it the correct functionality later on in this tutorial. You will also see that the selectArrow span contains some text which you should recognise as a unicode value. This is code for a downward triangle shape ▼ which will replace the drop down arrow seen on standard select boxes.

Next is the select options, these are to be placed after the selectArrow span tag like so:

<div class='selectBox'>
	<span class='selected'></span>
	<span class='selectArrow'>&#9660</span>
	<div class="selectOptions" >
		<span class="selectOption" value="Option 1">Option 1</span>
		<span class="selectOption" value="Option 2">Option 2</span>
		<span class="selectOption" value="Option 3">Option 3</span>
	</div>
</div>

Each option is represented as a span tag which holds the value attribute and inner text like a normal option tag. These are contained in a div with class 'selectOptions'.

Here is a shot of what we have so far:

HTML Arrow

So that's the HTML part of the select box covered but as you know this means nothing without the accompanying CSS to give its unique look which is what we're going to add next.

The CSS Code

Now we define the style of our select via CSS. First here is a list of what CSS selectors we will be using:

  • span.selectOption – each option item
  • span.selectOption:hover (for mouse rollover effects)
  • span.selectArrow – drop down arrow button
  • span.selected – stores the selected option text
  • div.selectBox – main select box container
  • div.selectOptions – select options container

Firstly lets tackle the top parts of the select box which are div.selectBox, span.selectArrow and span.selected. Here is the code:

div.selectBox {
	position:relative;
	display:inline-block;
	cursor:default;
	text-align:left;
	line-height:30px;
	clear:both;
	color:#888;
}
span.selected {
	width:167px;
	text-indent:20px;
	border:1px solid #ccc;
	border-right:none;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	background:#f6f6f6;
	overflow:hidden;
}
span.selectArrow {
	width:30px;
	border:1px solid #60abf8;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	text-align:center;
	font-size:20px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	background:#4096ee;
}

span.selectArrow,span.selected {
	position:relative;
	float:left;
	height:30px;
	z-index:1;
}

Now you should be familiar with CSS anyway so I won't go into too much detail about this code but here are a few of the major points.

  • span.selectArrow and span.selected are set to float left so that they are placed inline with each other. They are also given the same height. line-height:30px makes the options and arrow align vertically in their respected containers.
  • span.selectArrow is given a curved border on the right and selected is given a curved border on the left so that together the select box edges are all curved.
  • clear:both is placed into div.selectBox to counter the effects of using float in span.selectArrow and span.selected.
  • A font size of 20px is set in the selectArrow to enlarge the unicode triangle as it's a bit small in relation to the select box size.

NOTE: You may need to change the z-index:1 value in the span.selectArrow,span.selected selector in order for it to comply with your web pages.

Now that we're half way through the CSS, this is what the select box looks like so far.

CSS Part 1

Its starting to resemble a select box now let finish off the CSS code by adding the following:

div.selectOptions {
	position:absolute;
	top:28px;
	left:0;
	width:198px;
	border:1px solid #ccc;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	overflow:hidden;
	background:#f6f6f6;
	padding-top:2px;
	display:none;
}
	
span.selectOption {
	display:block;
	width:80%;
	line-height:20px;
	padding:5px 10%;
}

span.selectOption:hover {
	color:#f6f6f6;
	background:#4096ee;			
}			

Again I'll just go over the major points of this code:

  • The selectOptions is given a relative position of top:-4px and in combination with the z-index:1 of the span.selected and span.selectArrow, it's slightly underlapped to make it look more like a drop down menu.
  • The bottom edges of the div.selectOptions are curved.
  • The width of div.selectOptions is set to the width of the span.selected + span.selectArrow minus 2px to take into account the div.selectOptions border.
  • The div.selectOptions has a top padding to counteract the relative positioning so each item looks the same height.
    Ok, that's all the CSS finished, lets see what the select box looks like now (I have commented out the display:none in the div.selectOptions so you can see it).

CSS Part 2

The jQuery Code

Now that we have both the CSS and HTML in place we can begin writing the jQuery to give this custom select box its functionality.
First we'll define a JavaScript function which inside will house our jQuery code. This function can then be run when you want to enable the select boxes which will most likely be when the page has loaded using the $(document).ready function of jQuery. Here is a skeleton of the code:

$(document).ready(function() {
	enableSelectBoxes();
});

function enableSelectBoxes(){
	$('div.selectBox').each(function(){
		//do something
	});
}

As you can see by using jQuery we are going to iterate through each select box container by using the .each() function. To make it easier, we'll break down the function into different sections and gradually create a working custom select box.

Firstly we want the text of the first option to appear in our span.selected and we also want the value of the first option to be set to our div.selectBox so that other functions can see what the select box has got selected. This is done with 2 lines of code which are:

$(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
$(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

This piece of code uses jQuery's traversal functions in order to obtain and set the text and value in their respected tags.
Next we need to set up an event so that when either the span.selected or span.selectArrow is clicked, the div.selectOptions is shown or hidden depending on its current state:

$(this).children('span.selected,span.selectArrow').click(function(){
	if($(this).parent().children('div.selectOptions').css('display') == 'none'){
		$(this).parent().children('div.selectOptions').css('display','block');
	}
	else
	{
		$(this).parent().children('div.selectOptions').css('display','none');
	}
});

This piece of code again uses jQuery traversal functions and sets the CSS property – display to either block or none on the div.selectOptions.

A last piece of code is required to control when one of the options in the select box is clicked. When an option is clicked its text and value need to be assigned to the span.selected and div.selectBox respectively.

$(this).find('span.selectOption').click(function(){
	$(this).parent().css('display','none');
	$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
	$(this).parent().siblings('span.selected').html($(this).html());
});

Putting these 3 pieces of code together gives us the full code for the function and with that, we have completed the custom select box in its entirety.

Advanced Enhancements

Following the steps above will give you a fully working custom select box, however there are a number of extra features you may wish add to your select box depending on how it will be used. Unfortunately these extra features are beyond the scope of this tutorial but here are some ideas that you could consider adding:

  • Add gradient backgrounds for the arrow button or select options.
  • Animate the drop down selection list.
  • Automatic transformation of normal select box to custom.
  • Retract the select options when there is a click outside the select box.

jQuery

To Conclude

Hopefully by now you should have your very own custom select box which looks something like the above so congrats to you! Please feel free to comment and drop me a link if you decide to include a custom select box, as I would love to see it in action.

Peter is a self taught (mostly) programmer with a keen interest in web based applications. He is always keen to learn anything IT related. He likes to create useful and easy to use tools for all to enjoy. If he has a design in his head he will make it come to life.