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.
[tut demo=”https://onextrapixel.com/examples/jquery-custom-selectbox/” download=”https://onextrapixel.com/examples/jquery-custom-selectbox/jquery-custom-selectbox.zip”]
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'>▼</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'>▼</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:
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 itemspan.selectOption:hover
(for mouse rollover effects)span.selectArrow
– drop down arrow buttonspan.selected
– stores the selected option textdiv.selectBox
– main select box containerdiv.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
andspan.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 intodiv.selectBox
to counter the effects of using float inspan.selectArrow
andspan.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.
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 thedisplay:none
in thediv.selectOptions
so you can see it).
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.
[tut demo=”https://onextrapixel.com/examples/jquery-custom-selectbox/” download=”https://onextrapixel.com/examples/jquery-custom-selectbox/jquery-custom-selectbox.zip”]
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.