HTML5: PlaceHolder - Como estilizar

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5.

Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5.

No artigo anterior aprendemos e vimos como é simples usar o atributo placerholder das TAGs input e textarea: Placeholder em HTML 5. Nesse você vai ver que estilizar é mais simples ainda.

Listagem 1: Exemplo de CSS para estilizar o placeholder.

::-webkit-input-placeholder  { color:#4C4; }
input:-moz-placeholder { color:#4C4; }
textarea:-moz-placeholder { color:#4C4; }​

Listagem 2: O HTML.


Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/1/

Caso queira fazer um estilo para apenas um campo você pode fazer da seguinte forma:

Listagem 3: Exemplo de CSS para estilizar o placeholder de apenas um campo.

#email::-webkit-input-placeholder{
    color:#C4C;
    background-color: #4C4;
    text-transform: uppercase;
    font-style: bold;
}
#email::-moz-placeholder {
    color:#C4C;
    background-color: #4C4;
    text-transform: uppercase;
    font-style: bold;
}​ 

Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/2/

Bom galera, é isso. Agradeço a atenção de todos. Deixem seus comentários e até o próximo artigo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?