Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
@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.
Ah, infelizmente o evento focus não funciona no IE para variar.
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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.off.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>Obrigado novamente.
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">
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}