Create a Customized SelectBox using CSS & jQuery

Last Week I needed to make a customized select box in a web application using Jquery and I spent two days searching in order to find one (but with javascript!).
So I decided to share the one that developed.

This is my first intent of Tutorial so I will try to do my best lol…

What I think it amazing of what I did? The select box I'm sharing with you can be reused because the common styles are added in classes and also the Jquery code it is optimized to be used in as many select boxes you would like to have in your web! Great, right?

So let’s begin:

Download the Source File here.

View a Demo here.

Step 1: Preparing our Project

We create a new directoy for the project, then create a second directory inside there called "images" and save the image (dropdown.jpg) inside.

Also create two others directorys inside your project. One should be called “dropdown.js” (this is where we are going to add our jquery script) and another one called “lib” where we will be adding the jquery library. 

You can download the latest Jquery library version here

Step 2: HTML

 

Now we create a HTML document and write in some code:

The main idea is that we will be having a default select input hidden and on top we will be adding an ul list with the customized styles you would like. 

1- Add on inside the tag the following:

2- Everything should be inside a form.

3- Add a label explaining what the user should select in the select box input.
It is recommended that you Label All Form Input Elements for Accessibility on your website.
Why do we need it?

The label element adds functionality for people who use the mouse and a screen reader. Clicking on text within the label element focuses the corresponding form element. Screen readers can read the label so that visitors know what information to provide.

For more info about this I recommend you read the following:
http://www.w3.org/standards/webdesign/accessibility

4- Next we will add the select with a class called “select-invisible ”will be having a display:none

5- And the option inside the select. Notice that each value of the options tag are the same as the rel of the li

6- Then we will be creating the container div for our ul list with a a class called “replace”. This class name will be having the common styles for all the select inputs in our web application. And we will be adding the particular styles in the id (in my example I called it “id-options”).

(Remember that you only can have one id for page )

7- Inside the container div, now we create the “current” div. This one is the one that will be having the drop down button image and where the selected options of the user will go.

8- Finally, the li with their rel attributes (remember they need to correspond with the values of the option )

Step 2: The CSS Styles

Now with styling up elements.

A few things to note here: As I told you at the beginning we will be having the common styles for all the select box in the class and the particular styles in the div so we can have many select boxes in the website.

Copy this in the "head" tag or in an external CSS file as you prefer:

Step 3: Our Small Jquery

The next thing we need to do is add some jquery script to make the select box actually work.

Create a file called "selectbox.js" inside the "js" directory we created in the first step.

// SelectBox Customized
$(document).ready(function (){ 

 var customizeSelect = function (selectInvisible, replacementSelect) { //Function for all selects
  
  selectInvisible.css('display', 'none');
  replacementSelect.css('display', 'block');
  replacementSelect.find('ul.options').css('display','none');  
  
  var lis = replacementSelect.find('li'); //Select all the li inside the ul called replacementeselect

  lis.each(function (index, li) { //to select each element of the lis 
   $(li).click(function (){ //When you do a click in the li...
    selectInvisible.val($(this).attr()); //Assign to the select value, the clicked div attributte
    replacementSelect.find('ul.options').css('display','none'); //Do not show the option tag
    replacementSelect.find('div.current').html($(this).html()); //Faked selected option that will be showned in the select input.
   });
  });
  
  $(replacementSelect).mouseover(function() {
   replacementSelect.find('ul.options').css('display','block'); //Show the ul options (li) when you mouseover
  });
  
  $(replacementSelect).mouseleave(function() {
   replacementSelect.find('ul.options').css('display','none'); //Hide the ul options (li)
  });
 };
 
 //Create a collection of selects and pass to each one a particular item & particular item
 $('select.select-invisible').each(function (index, invisibleSelect) {
  customizeSelect($(invisibleSelect), $('#replace-options'));
 });
 
});

Step 4: Would you like to use more selectboxes??

If you would like to add a new selectbox in your website just create a new invisible select box AND the corresponding ul list and create a new id name for the div.

For example if your new id would be called "#sort-by"

In this line you simple would need to add it:

//Create a collection of selects and pass to each one a particular item & particular item
 $('select.select-invisible').each(function (index, invisibleSelect) {
  customizeSelect($(invisibleSelect), $('#replace-options')); //this is our first select box
  customizeSelect($(invisibleSelect), $('#sort-by')); //this is our new select box
 });

I hope you find it useful!

ENJOY!!
Orangejuice.-