HTML5: PlaceHolder - Como estilizar

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.

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados