Jump to content


Photo

Campo Com Dois Estilos


  • Faça o login para participar
Nenhuma resposta neste tópico

#1 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 25/11/2003, 14:44

Vou explicar aqui como podemos fazer para que num campo de texto, por exemplo, ficar com uma cor diferente e, quando clicado, essa cor mude. Isso também pode ser aplicado a botões, e diversas outras coisas.

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




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq