cor diferente campo input

1. cor diferente campo input

jformiga_rs
(usa OpenSuSE)

Enviado em 07/09/2009 - 08:42h

Galera, bom dia. Satisfação participar com vcs neste forum. Seguinte: aqui no VivaOlinux, enquanto estou preenchendo esta mensagem, o fundo do input ficou amarelo. Como faço pra que quando colocar o mouse sob um campo de input o mesmo fique em outra cor? Obrigadão e até.

0 0

Quote

2. Re: cor diferente campo input

angelito
(usa Fedora)

Enviado em 07/09/2009 - 22:38h

Voce pode utilizar o comando:

#nome_da_div input:hover{
background: #000000;
}

Espero ter ajudado,

Abraço.

0 0

Quote

3. Cor Diferente Campo Input

jformiga_rs
(usa OpenSuSE)

Enviado em 08/09/2009 - 09:45h

Perdão pelo desconhecimento mas, podes mostrar um exemplo simples? Na verdade, preciso que todos os campos de INPUT fiquem com cor diferenciada qdo for preencher os mesmos. Novamente, obrigado amigos.

0 0

Quote

4. Re: cor diferente campo input

Smithux
(usa Arch Linux)

Enviado em 08/09/2009 - 10:29h

Amigão, segue um exemplo bem simples de um formulário de login onde cada campo fica de uma cor diferente ao receber o foco. Espero que te seja útil.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>
<title>Exemplo Input Colorido</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />


<style type="text/css">
input.iNome:hover, input.iNome:focus{background: #FFFFD0;}
input.iSenha:hover, input.iSenha:focus{background: #AFE5FF;}
</style>

</head>

<body>

<h1>Exemplo de INPUTs Coloridos.</h1>

<fieldset>
<legend>Login</legend>
<br />
<form action="" method="post">
<label for="nome">Nome: </label>
<input type="text" name="nome" class="iNome" />
<br />
<label for="senha">Senha: </label>
<input type="password" name="senha" class="iSenha" />
</form>
<br />
</fieldset>

</body>
</html>

0 0

Quote

5. Cor Diferente Campo Input

jformiga_rs
(usa OpenSuSE)

Enviado em 10/09/2009 - 08:45h

O Código abaixo (obrigado ao amigão q me mandou!!) funciona 100% pra todos os Browsers. Exceto o IE. Agora a pergunta é: como fazer funcionar no IE ? Vamos continuar buscando resposta. Abraço.

0 0

Quote

6. Re: cor diferente campo input

Smithux
(usa Arch Linux)

Enviado em 10/09/2009 - 12:45h

Amigão, você pode usar JAVASCRIPT para solucionar o problema no IE.
Veja que agora adicionei à tag INPUT os códigos onfocus="..." e onblur="...", sendo que o onfocus muda a cor do campo que o mesmo estiver selecionado, e o onblur volta a cor original do campo quando sair.

Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>
<title>Exemplo Input Colorido</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />


<style type="text/css">
input.iNome:hover, input.iNome:focus{background: #FFFFD0;}
input.iSenha:hover, input.iSenha:focus{background: #AFE5FF;}
</style>

</head>

<body>

<h1>Exemplo de INPUTs Coloridos.</h1>

<fieldset>
<legend>Login</legend>
<br />
<form action="" method="post">
<label for="nome">Nome: </label>
<input type="text" name="nome" class="iNome" onfocus="this.style.backgroundColor='#FFFFD0';" onblur="this.style.backgroundColor='';" />
<br />
<label for="senha">Senha: </label>
<input type="password" name="senha" class="iSenha" onfocus="this.style.backgroundColor='#AFE5FF';" onblur="this.style.backgroundColor='';" />
</form>
<br />
</fieldset>

</body>
</html>

0 0

Quote