Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pslucasps

[Resolvido] Tratamento de Cores em Formulario

Por , em Javascript

Recommended Posts

pslucasps    2

pslucasps
Postado

Olá eu gostaria de estilizar os inputs text de formularios como na pagina abaixo:

http://www.ageofempires2.com.br/forum/ucp....0b41ce69513c08d

 

Como veem ao clicar no input a borda fica azul e ao clicar no outro input a borda do primeiro volta ao normal e a do segundo fica azul. Além disso ao passar o mouse em cima a borda fica preta e ao retirar a mesma volta a cor normal. Gostaria de saber como fazer isso. Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

mto facil cara, XD

 

 

:focus, :hover, .... sao pseudoclasses do css pode dar uma olhado no site http://www.w3schools.com/CSS/css_reference.asp#pseudoclasses

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
input{border:1px solid #b3b3b3; font-family:Verdana, Geneva, sans-serif; font-size:8pt; padding:3px;}
input:hover{border:1px solid #000000;}
input:focus{border:1px solid #11a3ea; color:#0f4980}
</style>
</head>

<body>
<form>
<input type="text" value="this is an sample by wm" size="30" maxlength="30"/>
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pslucasps    2

pslucasps
Postado

@webmind: Pow cara valeu mesmo. Eu estou aprendendo CSS agora, pois só conhecia PHP antes fazia sites em tabelas e por isso não sabia que existia que a pseudoclasse hover podia ser aplicada em inputs e nem que existia a pseudoclasse focus. De qualqeur forma muito obrigado e parabéns.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

IE e os seus bugs, existe uma forma mas nao mto legal, na minha opiniao, que dizer ainda havia outra forma mas talvez esta maneira seja mais facil de entender

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.off
{
border:1px solid #b3b3b3; font-family:Verdana, Geneva, sans-serif; font-size:8pt; padding:5px;}

.on
{
border:1px solid #11a3ea; color:#0f4980; font-family:Verdana, Geneva, sans-serif; font-size:8pt; padding:5px;
}


</style>
</head>

<body>
<label for="nome">Nome</label><br />
<input type="text" class="off" onBlur="this.className='off';" onFocus="this.className='on';" /><br /><br />
<label for="email">Email</label><br />
<input type="text" class="off" onblur="this.className='off';" onfocus="this.className='on';" /><br /><br />
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito