PDA

View Full Version : Changing Input Field Background Color

w0lf42
08-13-2003, 12:47 PM
I am trying to change the background color of an input field. I realize this code is only aimed at Mozilla (and other current DOM compliant browsers). However, I have no idea why it's not working.

Any suggestions would be most apprciated.

<html>

<head>

<title>Change Background Color</title>

<script language="JavaScript" type="text/javascript">
<!--
function changeBackground( divName ) {
document.getElementById(divName).style.backgroundColor = "#FF0000";
} // end changeBackground
// -->
</script>

<style type="text/css">
<!--
.inputTextMonth {
width: 35px; height: 20px;
border: 1px solid #999999;
background-color: #999999;
}
// -->
</style>

</head>

<body>

<form name="registerForm">
<input type="text" name="birthMonth" maxlength="2" class="inputTextMonth" onMouseOver="changeBackground( 'inputTextMonth' )" />
</form>

</body>

</html>
Dennis
08-13-2003, 02:21 PM
Originally posted by w0lf42
<html>

<head>

<title>Change Background Color</title>

<script language="JavaScript" type="text/javascript">
<!--
function changeBackground( divName ) {
document.getElementById(divName).style.backgroundColor = "#FF0000";
} // end changeBackground
// -->
</script>

<style type="text/css">
<!--
.inputTextMonth {
width: 35px; height: 20px;
border: 1px solid #999999;
background-color: #999999;
}
// -->
</style>

</head>

<body>

<form name="registerForm">
<input type="text" name="birthMonth" maxlength="2" class="inputTextMonth" onMouseOver="changeBackground( 'inputTextMonth' )" />
</form>

</body>

</html>

hi, analizing your code there are some errors..

you are trying to call a div by id, and in the call to the funcion you use the name. I offer you this code, say me what do you think


<html>

<head>

<title>Change Background Color</title>

<script language="JavaScript" type="text/javascript">
<!--
function changeBackground(which) {
which.style.backgroundColor="red";
}
// -->
</script>

<style type="text/css">
<!--
.inputTextMonth {
width: 35px;
height: 20px;
border: 1px solid #999999;
background-color: #999999;
}
// -->
</style>

</head>

<body>

<form name="registerForm">
<input type="text" name="birthMonth" maxlength="2" class="inputTextMonth" onMouseOver="changeBackground(this)">
</form>

</body>

</html>


:)
w0lf42
08-14-2003, 11:10 AM
Dennis,

Very helpful. Thanks for your input.
agent002
08-14-2003, 01:45 PM
This code changes the background color when hovering it, maybe you would like the background color return to normal when moving the cursor outside the input field. I modified the code by Dennis a bit.

<html>
<head>
<title>Change Background Color</title>
<script language="JavaScript" type="text/javascript"><!--
function changeBackground(which){
which.style.backgroundColor="red";
}
function returnBackground(which){
which.style.backgroundColor='';
}
//--></script>
<style type="text/css">
<!--
.inputTextMonth {
width: 35px;
height: 20px;
border: 1px solid #999999;
background-color: #999999;
}
// -->
</style>
</head>
<body>
<form name="registerForm">
<input type="text" name="birthMonth" maxlength="2" class="inputTextMonth" onMouseOver="changeBackground(this);" onMouseOut="returnBackground(this);">
</form>
</body>
</html>
Dennis
08-14-2003, 02:20 PM
if we want to do a very small code, we can also do so:


<input type="text" name="birthMonth" maxlength="2" class="inputTextMonth" onMouseOver="this.style.backgroundColor='aqua';" onMouseOut="this.style.backgroundColor='red'">


:)