Design Tip:
Add Color To Your Select Lists

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Select lists make it easier for visitors to complete forms. Lists also give you more control over the format of information they submit. But long select lists can frustrate users too: haven't you ever inadvertently selected the wrong option because the choices seemed to run together? Try this technique to add color to your select lists. Color makes them more visually appealing and easier to use.

Use Style Sheets For Color

This technique uses Cascading Style Sheets (CSS) and works in Explorer 5.0+ and Netscape 6.0+. It degrades gracefully in Netscape 4.x and WebTV browsers though. Visitors using those browsers see a normal select list. Use it to colorize standard select menus in data input forms or navigation menus.

First, define your styles for each color in the select list. Since you're applying different styles to the same category of elements, you'll have to define a separate class for each option color you want to use.

Insert your style definition inside the document's HEAD section:

<STYLE type="text/css">
OPTION.mar{background-color:maroon; color:white}
OPTION.white{background-color:white; color:maroon}
</STYLE>

Here, you're setting two different color schemes for the options in the select list: marWhite has white text on a maroon background and whiteMar has maroon text on a white background.

Then, in the BODY section of your document, you can apply the style definition to your select list:

<FORM>

<SELECT>

<OPTION>What is your preferred browser?</OPTION>
<OPTION class="mar">Explorer 5.5</OPTION>
<OPTION class="white">Explorer 6.0</OPTION>
<OPTION class="mar">Netscape 4.7</OPTION>
<OPTION class="white">Netscape 6.0</OPTION>
<OPTION class="mar">WebTV</OPTION>
<OPTION class="white">Lynx</OPTION>
<OPTION class="mar">Other</OPTION>
</SELECT>
</FORM>

Here's how it looks in various browsers:

Note that you don't get any weird effects in Netscape 4.7 or WebTV. The list displays as a regular select list.

Add Interest And Reduce Errors

Colored select lists are valuable for several reasons:

Visual Interest: Add color and contrast to your site without increasing download time. Fewer Input Errors: Visitors can select the correct option more easily. Increased Accessibility: The improved contrast between options helps visitors with visual or cognitive problems identify the different options more easily. You may even want to add specific fonts or formatting to your style declarations to make the options more prominent.

Remember though, that all these good points can be obliterated by poor color choices. Choose your colors wisely. They should integrate well with the rest of your site and offer high contrast for readability. Avoid red and green combinations because many people suffer from red/green color blindness.

Be sure to test your menu on as many different browsers and operating systems as possible. A font and color that looks great on in Explorer 5.0 on a PC may look just awful in Netscape 6.0 on an iMac.

Style Sheets And Browser Incompatibility

Fonts and colors are the only concern: you need to thoroughly test any page that uses style sheets.

Incomplete browser support is a big reason why many Web designers shy away from CSS - even though style sheets allow much more control over page layout. Don't throw away such a valuable tool. With practice, you'll learn which style definitions are most useful and/or least disruptive in each browser.

For instance, although this tip is incompatible with some Netscape browsers and with WebTV, it won't break your pages in those browsers. It's a low impact technique: visitors who use those browsers still see a normal select list.

That isn't the case with all style definitions - or even common HTML tags. If other browser incompatibility issues have you frustrated, try checking your page with NetMechanic's HTML Toolbox and Browser Photo tools. Toolbox checks your HTML code and alerts you to incorrect code or tags that are browser-specific. Browser Photo shows you actual screen shots of your page in 14 different browser, browser version, and operating system combinations.