JavaScript: Formatting Background, Font, and Sticky Selection in Dropdowns

INSTRUCTIONS: ============= Step 1.: The Style Script ------------------------- Put the following style script in the head of the page. Set overall font characteristics with the select.Menu style. Set individual item foreground (text) colors and background colors with color and background-color in the option.MenuColorOne, option.MenuColorTwo, option.MenuColorThree styles. To make more styles, just follow the pattern. <style> select.Menu{ font-family: Verdana,sans serif; font-size: 14pt; font-weight: bold; font-style: normal; } option.MenuColorOne{ color:#FFFFFF; background-color:#FF0000; } option.MenuColorTwo{ color:#FFFF00; background-color:#0000FF; } option.MenuColorThree{ color:#123456; background-color:#FEDCBA; } </style> Step 2.: Attaching the Styles ----------------------------- Attach the Menu style to the <select> tag. Attach the MenuColorOne, MenuColorTwo, and MenuColorThree styles to the <option> tags. See the example, below: <form> <select class="Menu" size="1"> <option class="MenuColorOne">Item One</option> <option class="MenuColorOne">Item Two</option> <option class="MenuColorOne">Item Three</option> <option class="MenuColorTwo">Item Four</option> <option class="MenuColorTwo">Item Five</option> <option class="MenuColorTwo">Item Six</option> <option class="MenuColorThree">Item Seven</option> <option class="MenuColorThree">Item Eight</option> <option class="MenuColorThree">Item Nine</option> </select> </form> Step 3.: Creating Sticky Selection (Optional) --------------------------------------------- To create a sticky selection effect, attach the onClick event call to self.focus() to the <select> tag, as shown below: <select class="Menu" size="1" onClick="javascript:self.focus()"> Script Notes: ------------- This technique works in IE browsers; degrades gracefully in others.

Comments

See the instructions above for installation directions.  Try the popup demo (above) to exercise the script.

This script sets font and background characteristics in dropdowns.  Optionally, you may set sticky selection, which changes the action of the dropdown slightly (experiment with the popup demo to see the difference).

.