|
|
change the text color of a drop down list
Sometimes the default text color – black – just doesn’t work with your page. You can easily change this color upon page loading or dynamically according to user preferences. We use a style.color statement to access and apply the new color to the page element that is specified with the name= attribute.
We use an onMouseOver event to trigger the JavaScript function that is given in the HEAD of the document. The actual color value stated is a named color and is given as the argument passed to the JavaScript function that was created, in this case changeColor(). The coloring method used may be named colors, hex colors or RGB colors.
<html>
<head>
<script type="text/javascript">
function changeColor(color) {
thisform.elements[0].style.color=color;
}
</script>
</head>
<body>
<p>This example demonstrates how to change the text 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="thisform">
<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 I didn’t give name= or value= values in the option tags in the example. This is because the server-side script doesn’t need them if your form name= attribute is stated. All of the option tags will be treated as part of the form being submitted. It should be noted, though, that you would have to state name= and value= attributes if you’re using more than one form within a single page. This is a browser requirement, not a server-side scripting issue.
|
|
