estilos.css
<!--
.campo1 {font-family:arial; font-weight:bold; color: #ffffff; border: 1 solid #000000; background-color:#1e90ff}
.campo2 {font-family:arial; font-weight:bold; color: yellow; border: 1 solid #000000; background-color:#666666}
//-->
pagina.html
<html>
<head>
<link rel="stylesheet" href="estilos.css">
<title>Página de Teste</title>
</head>
<body>
<form action="pagina_de_destino.php" method="POST" name="formulario">
<table border=0>
<tr>
<td>Nome</td>
<td><input type="text" value="" name="nome" class="campo1" onfocus="this.className='campo2';" onblur="this.className='campo1';"></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" value="" name="email" class="campo1" onfocus="this.className='campo2';" onblur="this.className='campo1';"></td>
</tr>
<tr>
<td>Assunto</td>
<td><input type="text" value="" name="nome" class="campo1" onfocus="this.className='campo2';" onblur="this.className='campo1';"></td>
</tr>
<tr>
<td>Mensagem</td>
<td><textarea cols="3" rows="3" name="mensagem" class="campo1"onfocus="this.className='campo2';" onblur="this.className='campo1';"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="send" value=" Enviar " class="campo1" onmouseover="this.className='campo2';" onmouseout="this.className='campo1';"></td>
</table>
</form>
O elemento ONFOCUS é acionado quando damos algum foco ao campo, sem submeter o formulário.
O elemento ONBLUR é o que retira o foco do campo, sem submeter o formulário.
O elemento ONMOUSEOVER é o evento que é acionado quando o mouse está posicionado em cima do campo.
O elemento ONMOUSEOUT é aquele que mostra quando o ponteiro do mouse sai de cima do campo.
Espero que tenham gostado.
WITHOUT A NICK
