Como estilizar placeholder de inputs HTML5

Estilizar placeholder de inputs é relativamente simples, porém, existem alguns truques que devem ser seguidos para que a solução funcione corretamente em todos os navegadores.

Primeiramente, vamos falar da maravilha que o placeholder faz quando tratamos de formulários e inputs.

Provavelmente você deve se lembrar de ter visto dicas que ficam dentro dos inputs como texto, e, assim que você começa a digitar, o texto simplesmente desaparece, dando lugar ao conteúdo requerido por tal input.

Por exemplo, se tentarmos acessar o site outlook.com da Microsoft sem ter feito login, veja como os campos e-mail e senha aparecem:

Input do site Outlook.com

E se eu digitar meu e-mail e senha, aquele texto de exemplo simplesmente desaparece:

Input do site Outlook.com Preenchido

Antigamente, tínhamos que escrever algumas linhas de código Javascript (um tanto confusas) para que isso funcionasse perfeitamente. Atualmente, isso pode ser feito com um simples atributo, o placeholder.

<input type="email" class="input-class" placeholder="Digite seu e-mail" required>

Perceba o atributo placeholder, que exibe o texto "Digite seu e-mail". Ele faz a mesma coisa que o exemplo anterior, simplesmente desaparece quando o usuário começa a digitar o texto.

O problema é: "Como estilizar placeholder de inputs?".

A solução é simples, veja:

/* Chrome, Safari, Opera */
::-webkit-input-placeholder {}

/* Firefox 18- */
:-moz-placeholder {}

/* Firefox 19+ */
::-moz-placeholder {}

/* IE10+ */
:-ms-input-placeholder {}

Infelizmente temos que utilizar os prefixos dos navegadores, e pior, não da para agrupar em uma única regra, pois, se um navegador não reconhecer uma das regras, ele vai pular todo o trecho de código.

Veja um exemplo real.

O HTML

<input type="text" class="input-class" placeholder="Name" required>
<input type="text" class="input-class" placeholder="Surname" required>
<input type="email" class="input-class" placeholder="Email" required>
<input type="text" class="input-class" placeholder="Phone" required>

O CSS

.input-class {
  padding: 5px;
  text-transform: uppercase;
  width: 150px;
  border: 1px solid #6db5f1;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  margin: 10px auto;
  display: block;
}

.input-class:focus {
  box-shadow: 0 0 5px #6db5f1;
  width: 250px;
}

.input-class::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #6db5f1;
  font-style: italic;
}

.input-class:-moz-placeholder { /* Firefox 18- */
  color: #6db5f1;
  font-style: italic;
  opacity: 1;
}

.input-class::-moz-placeholder {  /* Firefox 19+ */
  color: #6db5f1;
  font-style: italic;
  opacity: 1;
}

.input-class:-ms-input-placeholder { /* IE10+ */ 
  color: #6db5f1;
  font-style: italic; 
}

O exemplo acima deverá retornar o mesmo que o Codepen abaixo:

Codepen1

Veja também que para o Firefox, precisamos configurar a opacidade para 1, pois, caso não faça isso, a cor que você escolher vai ficar um pouco mais apagada.

opacity: 1;

Espero ter sido útil.