Dannys Code Snippets: Custom select dropdown with CSS and JS

Dropdowns have been a major pain in the backside in the past when it comes to styling of them, the default look doesn't always suite your website theme.

Customization is very limited, but it's not very difficult to change the style of the dropdown with CSS and javascript.

Lets turn this:

Into this:

Step 1
The HTML - This is simple, basically we have a div which holds the select element, it also holds the span element:

<div class="selection">
    <select class="selectbox" onchange="changeValue(this.value);">
        <option>test select</option>
        <option>test select 2</option>
        <option>test select 3</option>
        <option>test select 4</option>
        <option>test select 5</option>
    </select>
    <span id="selector">test select</span>
</div>

Step 2
The CSS - this tells the select element to become invisible, and tells the span what to look like and to sit below the selectbox.

<style>
.selection { position:relative; }

.selectbox,#selector {
 position:absolute;
 top:0;
 left:0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
}

.selectbox {
 width:220px;
 padding:5px;
 height:30px;
 opacity:0;
 z-index:5;
}

#selector {
 background-image:url(dropdown.jpg);
 background-repeat:no-repeat;
 padding:5px 43px 5px 10px;
 overflow:hidden;
 width:162px;
 height:20px;
 color:#fff;
}
</style>

Perfect, as you can see from the CSS, the span with the id of #selector uses a background image called dropdown.jpg - this gives the coloured background and the arrow, you can make your own one. - this image is 215x30px if you change the size of it make sure you adjust the CSS accordingly, basically fiddle around with the #selector width and padding. You may also need to change the .selectbox width and padding if you experience difficulty clicking the dropdown once you've changed the size.

Step 3
The Javascript - this is just to update the span with the selected dropdown option.

You can do this with the jQuery library (if you already use it on your website), or using built in javascript, both work fine:

jQuery

<script>
function changeValue(val)
{
 $('#selector').html(val);
}
</script>

Javascript

<script>
function changeValue(val)
{
 document.getElementById('selector').innerHTML = val;
}
</script>

So there you have it, the complete code is below:

Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Select box</title>
<script>
function changeValue(val)
{
 document.getElementById('selector').innerHTML = val;
}
</script>
<style>
.selection { position:relative; }

.selectbox,#selector {
 position:absolute;
 top:0;
 left:0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
}

.selectbox {
 width:220px;
 padding:5px;
 height:30px;
 opacity:0;
 z-index:5;
}

#selector {
 background-image:url(dropdown.jpg);
 background-repeat:no-repeat;
 padding:5px 43px 5px 10px;
 overflow:hidden;
 width:162px;
 height:20px;
 color:#fff;
}
</style>
</head>

<body>
<div class="selection">
    <select class="selectbox" onchange="changeValue(this.value);">
        <option>test select</option>
        <option>test select 2</option>
        <option>test select 3</option>
        <option>test select 4</option>
        <option>test select 5</option>
    </select>
    <span id="selector">test select</span>
</div>
</body>
</html>

Thursday, 22 March 2012

Custom select dropdown with CSS and JS

5 comments: