|
|
change background color of an input field
This option can easily be applied as the page loads or according to user selection. We use the style.background statement to change the color. The color can be stated as a named color, hex color or RGB color.
<html>
<head>
<script type="text/javascript">
function changeColor(color) {
document.getElementById('x').style.background=color;
}
</script>
</head>
<body>
<p>This example demonstrates how to change the background color of an input field.</p>
<p>Mouse over the three colored table cells, and the input field will change background-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>
<input id="x" type="text" value="Mouse over the colors" size="20">
</form>
</body>
</html>
Be sure to use an appropriate id attribute on the input field you want to apply changes to. The arguments passed to the changeColor() function are stated in a static way as named colors but can also be decided upon with other functions by replacing the named color with a variable. The value of the value can be decided by other functions within the page.
|
|
