Custom Select Box Tutorial using CSS and jQuery

View Demo Download

Customising a select drop down list can be one of the frustrating things in customising HTML form elements. But with a few simple lines of jQuery and some CSS, we can create our own custom select drop down list.

If you are still an IE8 lover, this tutorial might be the right one for you. The icon(s) used in our demo are from the lovely creators of Font Awesome.

HTML

Let’s start with the basic html for two select box as our examples:

<div id="select1">
    <select>
        <option>One</option>
        <option>Two</option>
        <option selected>Three</option>
        <option>Four</option>
    </select>
</div>

<div id="select2">
    <select>
        <option>Foggy</option>
        <option>Rainy</option>
        <option>Snowy</option>
        <option>Cloudy</option>
    </select>
</div>

jQuery
We’ll start off with the jQuery section then proceed to the CSS because the styles we are going to create are dependant on the jQuery. Assuming you have already added the jQuery library, this is what the required jQuery script would look like. Don’t you worry, we’ll go over each script line and learn what each line means.
var select = $('select');
select.each(function() {
   		var firstSelectedText = $(this).find(':selected').text();
   		$(this).wrap('<div class="selectWrapper"/>');
   		selectWrapper = $(this).parent();
   		customSelectCont = $('').appendTo(selectWrapper);
   		customSelectCont.text(firstSelectedText);
   		$(this).change(function() {
   			var newOption = $(this).find('option:selected').text()
            $(this).next(customSelectCont).text(newOption);
      })
});

Now, what the script basically does is to take the select drop down list and cache it so that we dont need to be calling it over and over on our script.
var select = $('select')

Then, we’ll loop over each select element on the DOM using jQuery .each() function which you can read more about it on Sam Deering’s article on Sitepoint.
select.each(function(){});

All of our functions will be run inside this method starting with capturing the selected option text on each of the select element and placing it in a variable.
var firstSelectedText = $(this).find(':selected').text();

We’ll then wrap the select element onto a new div and cache it also. This div will act as the parent container of the select and every other HTML element that we’ll use to customise the select box.
$(this).wrap('<div class="selectWrapper"/>');
selectWrapper = $(this).parent();

We’ll introduce a cached span that will be the basis of our custom select box and append it to our parent div. It will act as the select text container and from here, it’s where we’ll manipulate our custom select box to what we want through CSS.
customSelectCont = $('<span class="customSelectCont"/>').appendTo(selectWrapper);

You remember the variable we had created for the selected option text? Now, this is where its going to be placed.
customSelectCont.text(firstSelectedText);

For the final bit of jQuery, we’ll choose an option from the select element and have the selected option appear on the span we introduced.
$(this).change(function() {
	var newOption = $(this).find('option:selected').text()
  $(this).next(customSelectCont).text(newOption);
});

Basically, what the above code does is to capture the event of changing the options of the select element using jQuery Change() method.
The changed option’s text is placed in a variable, newOption. The select‘s next element is the span which displays the text of the changed option.
That’s all the jQuery that we need to deal with. Simple, right?
CSS
The CSS is pretty straight forward. We’ll start off by styling the parent container div we had wrapped the select and the span containing the selected text. One point to note though, the wrapper container .selectWrapper, has to have position:relative as this is referring point of the two elements inside it. The width and height of the custom select can be put here.
.selectWrapper {
    position: relative;
    width: 100%;
    height: 40px;
    margin: 0 0 40px;
}

For the select box, the key style property is the opacity and the z-index. The select box has to have a opacity:0 so that it’s not visible but still there and a higher z-index than the span.
select {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
    background: #000;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

For IE 8 to work and other obsolete browsers to work you can try this out.
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;

The styling for the .customSelectCont that is holding the selected option is straight forward.
.customSelectCont {
    background: #000;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 11px 5px 0;
    text-align: left;
    font-size: 15px;
    text-transform: uppercase;
}

For the down arrow to appear, I decided to use Font Awesome’s unicode, \f0d7, as icon. This is placed on the CSS property, content:"".
.customSelectCont:after {
    font-family: 'FontAwesome';
    content: "\f0d7";
    color: #fff;
    position: absolute;
    right: 4px;
    top: 3px;
    width: 34px;
    height: 86%;
    padding: 8px 0 0;
    display: block;
    background: #BF0013;
    font-size: 30px;
    text-align: center;
    box-sizing: border-box;
}

I hope you enjoyed this tutorial and found it useful.
View Demo Download
Share this:
Click to share on Facebook (Opens in new window)
Click to share on Twitter (Opens in new window)