Styling Dropdown Lists

Adding styles to a drop down list can not only make it look interesting, it can add to usability also. 

In this example I am going to look at adding style to a drop down list in a typical Quick Jump menu. This is a JavaScript form, as distinct from a FrontPage one, and you can get the HTML for it here: http://www.outfront.net/tutorials_02/faq.htm#DropDown However the same principles apply to any drop down list.

I have altered the basic form to point to various pages in the OutFront tutorials section, categorized under several headings. 

If you look at that list there is a lot there and, although the lines and indentations help, not all of it is that easily seen. If all the tutorials were listed it would be even less clear. We can fix that by adding some style. 

If you look at the source of the page you will see that each item in the drop down list starts with the tag <option>, thus 'option' will be our selector, the thing to which we will add style.

There are two types of pages in this list - the category main pages and the individual tutorial pages. As it is now there is little to differentiate them visually, though the individual page names have been indented and had a '-' placed in front of them. What we can do with CSS is add two different classes for 'option' and then call them to the different options on our list.

We will stick I think to red and pink here and forget our aberration with the violet text box! 

We can create the option styles quickly by copying the styles 'red' and 'pink' we have already created for the selector 'input' and applying them to two new classes of 'option'

Thus this will be added to our style sheet.

So that it now reads:

<style tyle=text/css>
input.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
input.pink {background-color: #ffcccc;}
textarea.violet {background-color: #ccccff; font-size: 10px;}
option.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
option.pink {background-color: #ffcccc;}
</style>

Applying this style is a little laborious, basically you must go though the option list in HTML and add the class 'red' to all the category options and the class 'pink' to all the tutorial page options.

So that this, for example:

Becomes this:

<option class="red" value= "../getting_started/">Getting Started </option>
<option class="pink" value= "../getting_started/html_intro1.htm">- Intro to HTML</option>

This is the result:

It is now a lot clearer what the options are when the list is opened.

Browser Note: This will not work in Netscape 4x, so do not abandon the text methods of laying out the list completely, combine the two.

While it is tempting to use these techniques to make very colorful forms, do try to keep things simple and clear for users. In some cases, as we have shown, using styles can make things even better and easier for users and that should always be your aim.

<< Part IV: Fun with Radio Buttons and Checkboxes