Html
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> input box style effects </title>
<script src= ". /js/try.js "></script>
<body bgcolor= "#ffcc99" >
<table width= "" align= "center" >
<caption align= "center" >
Input box style effects
</caption>
<tr>
<TD align= "Right" >
User name:
</td>
<td>
<input type= "text" value= "Type Here" name= "username"
Size= "onmouseover=" MouseOver (This)
Onmouseout= "MouseOut (This)"
Style= "width:106;height:211;border:1px solid;"
Onfocus= "cleartext (This)" > <!--onfocus When the mouse clicks into the input box, the contents are emptied--
</td>
</tr>
</table>
</body>
Js
function MouseOver (input) {
Input.style.bordercolor= "Blue";
Input.style.backgroundcolor= "#ffff66";
};
function MouseOut (input) {
Input.style.bordercolor= "#000";
Input.style.backgroundcolor= "#ffffff";
};
function cleartext (input) {
Input.value= "";
};
Input.style.borderColor and Input.style.backgroundColor input box style effects mouse over input box input box background color