• RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Home > CSS, Front End Development, HTML, Javascript > Styling Drop Down Boxes with jQuery

Styling Drop Down Boxes with jQuery

August 6th, 2009

One problem with HTML forms is it is hard to style the elements to fit into your design.  The tutorial will show you how to style the hardest of them all, the select box.

The Plan

Unfortunately browsers allow limited skinning of select boxes.  So the plan is to use jQuery to change a select box into a text box and a unorded list for the dropdown.  When a user clicks on the text box it will display the list below the textbox, just like a regular select box, but it’s easier to style.

Download Example

 

Getting Started

The first thing we’ll need is a select box.  Nothing special here, just a regular select, but we’re going to give it an id so we can reference it later in the jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Styling Select Boxes</title>
</head>
<body>
    <select name="Items" id="Items">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>

    </select>
</body>
</html>

 

The jQuery

To save a little time we are going to use a plugin to handle converting the select into a text box.  I’ll be using the plugin from brainfault.com. From my experience this plugin is far less painful then other ones I’ve tried. It’s as simple as importing the plugin and running a method.  Here is the code to get it up and running.

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" type="text/css" href="selectbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery.selectbox-0.5.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#Items').selectbox();
});
</script>

Basically we’ve just imported the CSS which styles everything, jQuery, and the plugin.  Once we have those then we just have to run the selectbox method on the select boxes we would like to style.  We could have done something like $(‘select’) if we wanted to apply it to all select boxes.

 

The CSS

The CSS in selectbox.css isn’t too difficult, the most important part is applying the background image to the newly created text box.  Really you don’t need to touch anything in the CSS and just change the image.  In our case we want to make a couple of changes.  We’re simply going to change the font size and width inside the selectbox class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Look and feel of select box */
.selectbox
{
  margin: 0px 5px 10px 0px;
  padding-left:2px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:1em;/* Resize Font*/
  width : 190px; /* Resize Width */
  display : block;
  text-align:left;
  background: url('bg_select.png') right;
  cursor: pointer;
  border:1px solid #D1E4F6;
  color:#333;
}

The full CSS file can be seen here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* Drop down styles*/
div.selectbox-wrapper {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  margin-top:-10px;
  padding:0px;
  text-align:left;
  max-height:200px;
  overflow:auto;
}

/*Drop down list styles*/
div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected {
  background-color: #EAF2FB;
}

/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current {
  background-color: #CDD8E4;
}

/* Drop down list items style*/
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

/* Look and feel of select box */
.selectbox
{
  margin: 0px 5px 10px 0px;
  padding-left:2px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:1em;/* Resize Font*/
  width : 190px; /* Resize Width */
  display : block;
  text-align:left;
  background: url('bg_select.png') right;
  cursor: pointer;
  border:1px solid #D1E4F6;
  color:#333;
}

 

The Image

The last thing we need to handle is creating the image that will be the background for our text box.  On the far left of the image is the button and to the left will be the background of the select box.  Here is the image we will be using.

bg_select

That’s it, after we’ve created the image we’re good to go.  I recommend looking at the plugin code to get an idea how it all works. This is a fantastic plugin so be sure to give your props over at www.brainfault.com .

Here is the code all together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Styling Select Boxes</title>
    <link rel="stylesheet" type="text/css" href="selectbox.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="jquery.selectbox-0.5.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#Items').selectbox();
    });
    </script>
    <style type="text/css" media="screen">
        body{
            background-color: #111;
        }
    </style>
</head>
<body>
    <select name="Items" id="Items">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>
    </select>
</body>
</html>

The CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* Drop down styles*/
div.selectbox-wrapper {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  margin-top:-10px;
  padding:0px;
  text-align:left;
  max-height:200px;
  overflow:auto;
}

/*Drop down list styles*/
div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected {
  background-color: #EAF2FB;
}

/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current {
  background-color: #CDD8E4;
}

/* Drop down list items style*/
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

/* Look and feel of select box */
.selectbox
{
  margin: 0px 5px 10px 0px;
  padding-left:2px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:1em;/* Resize Font*/
  width : 190px; /* Resize Width */
  display : block;
  text-align:left;
  background: url('bg_select.png') right;
  cursor: pointer;
  border:1px solid #D1E4F6;
  color:#333;
}

 

Download Example

 

  • RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Author: Shawn Categories: CSS, Front End Development, HTML, Javascript Tags: , ,
  1. Ahmad Alfy
    August 30th, 2009 at 16:36 | #1
    Reply | Quote

    This is definitely amazing.
    I was trying to find out how to style drop-down lists with CSS but it seems it’s not possible.
    Thanks to this plugin now I can give my client what he needs

    I will try to figure how to make this work using MooTools cause the CMS I am working with already implement it. It’s not a good idea I think to work with both MooTools and jQuery on the same site! LOL

  2. Ahmad Alfy
    August 30th, 2009 at 16:44 | #2
    Reply | Quote

    I have found this plugin to MooTools:
    http://www.cult-f.net/2007/12/14/elselect/

  3. Tony
    September 17th, 2009 at 12:52 | #3
    Reply | Quote

    This is a great tutorial but I am having a few issues with adapting it to my select item. The background image shows as intended but I am assuming the first option entry covers up the little triangle pointing down of the background image that i made on the right side? Also I can not get the list that drops down to be re-sized correctly, it refuses to get wider. My styles for the select are as follows.

    here is the link to the page that I am trying to make it work on. The select box is the first rounded rectangle on the top left of the calculator.

    http://www.hoffmanyork.com/clients/focus/CAL/calculatordemo/pages/calculate.html

    Any suggestions?

  4. Dan
    November 25th, 2009 at 06:23 | #4
    Reply | Quote

    How do I modify the code to get it to work with option groups?

Comments are closed.