cor diferente campo input

1. cor diferente campo input

JOSÉ MARCOS ALVES FORMIGA
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é.


  


2. Re: cor diferente campo input

Angelito Monteiro Goulart
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.


3. Cor Diferente Campo Input

JOSÉ MARCOS ALVES FORMIGA
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.


4. Re: cor diferente campo input

Phillipe Smith
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" />

<!-- Logo abaixo segue o estilo para a tag input ficar colorida no momento do preenchimento
Utilizei o conceito de CLASS do CSS para fazer isso, mas pode ser feito com ID.
Leia mais sobre CSS: http://maujor.com/index.php
-->
<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>



5. Cor Diferente Campo Input

JOSÉ MARCOS ALVES FORMIGA
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.


6. Re: cor diferente campo input

Phillipe Smith
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" />

<!-- Logo abaixo segue o estilo para a tag input ficar colorida no momento do preenchimento
Utilizei o conceito de CLASS do CSS para fazer isso, mas pode ser feito com ID.
Leia mais sobre CSS: http://maujor.com/index.php
-->
<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>


7. Re: cor diferente campo input

João Cagnoni
joaocagnoni

(usa Debian)

Enviado em 22/03/2010 - 10:15h

Se quiser facilitar e deixar seu código mais legível recomendo o uso de jQuery.






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts