HTML5: PlaceHolder - Como estilizar

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.

<input type="text" name="nome" placeholder="Nome" /><br />
<textarea name="mensagem" placeholder="Mensagem"></textarea>

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.