|
|
change background color of a drop down list
A drop down list is usually colored with a simple white background. You can change this using the style.background attribute to any color within the normal range available (millions of colors). The color value may be stated as a named color, hex color or RGB color.
We use the style.background attribute in a JavaScript function within the HEAD of the document. This function is triggered with an onMouseOver event and the new color is applied.
<html>
<head>
<script type="text/javascript">
function changeColor(color) {
formname.elements[0].style.background=color;
}
</script>
</head>
<body>
<p>This example demonstrates how to change the background color of an option list.</p>
<p>Mouse over the three colored table cells, and the option list will change color:</p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"> </td>
<td bgcolor="blue" onmouseover="changeColor('blue')"> </td>
<td bgcolor="green" onmouseover="changeColor('green')"> </td>
</tr>
</table>
<form name="formname">
<select>
<option>Mouse over the colored table cells</option>
<option>Mouse over the colored table cells</option>
<option>Mouse over the colored table cells</option>
<option>Mouse over the colored table cells</option>
</select>
</form>
</body>
</html>
Notice that we stated the color to be used as a named color. This appears as the argument that is passed to the changeColor() function created in the HEAD of the document. In this example we used the form name with the elements[0] collection to state which page element is to be used. You may use a document.getElementById(formname) statement if you’re more comfortable with that.
|
|
