Add Color to Forms
By Carrie
Gatlin
(7/26/00)
In Internet Explorer 4.0 and later, you can use style sheets to lend some color to those drab and dreary <SELECT> menus. Using the background-color style attribute, define classes to apply to the <SELECT> and <OPTION> attributes, specifying the background colors for each variant:
<STYLE type="text/css">
.greySelect
{background-color:#333333;
font-weight:bold;}
.optionYellow{background-color:#ffcc00;}
.optionRed{background-color:#cc0000;}
.optionGreen{background-color:#336633;}
</STYLE>
Then within the <SELECT> and tags, use the inline class attribute along with the classes defined in your external or document level style sheet:
<FORM>
<SELECT
class="whiteSelect">
<OPTION>select one
<OPTION
class="optionYellow">option one</OPTION>
<OPTION
class="optionRed">option two</OPTION>
<OPTION
class="optionGreen">option three</OPTION>
<OPTION
class="optionYellow">option four</OPTION>
<OPTION
class="optionRed">option five</OPTION>
<OPTION
class="optionGreen">option
six</OPTION>
</SELECT>
</FORM>
Here's what your new colorific menu would look like:
Netscape browsers will miss out on the fancy colors, but every user will be able to utilize the menu.