Alterando a Cor Do Texto Do Placeholder

Esses dias, estava construindo um input com background-color transparente e o conteúdo que estava atrás era justamente a mesma cor que o texto do placeholder! Obviamente, não seria legal deixar assim, afinal, não dava para ler nada! Mas, como alterar a cor do placeholder de um input? Pesquisando sobre isso, me deparei com o pseudo-elemento ::placeholder! Neste post, vou mostrar como usar esta propriedade de forma rápida e sem enrolação!

Definição

O ::placeholder permite que você personalize o texto que fica dentro do input, da forma que quiser! Para utilizar, basta adicionar o CSS desejado, semelhante a forma que você estiliza quando deseja altear o hover!

/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
  color: green;
}
/* Firefox 19+ */
::-moz-placeholder {
  color: green;
}
/* IE 10+ */
:-ms-input-placeholder {
  color: green;
}
/* Firefox 18- */
:-moz-placeholder {
  color: green;
}

Estilizações suportadas

• propriedades de fonte
• color
• propriedades de background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity