No HTML5, há a possibilidade de usar diversos atributos nos elementos html, e um deles é o placeholder
.
Placeholder, é o texto que aparece nos campos do formulário quando não tem nenhum valor definido.
Apenas com uso do CSS, é possível definir a cor do placeholder
sem afetar a cor do texto que será digitado no campo do formulário do site.
CSS usado para alterar a cor do placeholder
Para garantir que o css funcione na maioria dos navegadores, deve-se usar em conjuntos os prefixos complementares de cada navegador:
Por existirem diversos navegadores, é necessário adicionar prefixos para que os estilos CSS funcionem em cada um deles de forma diferente, como queira customizar.
::-webkit-input-placeholder { color: #c2c2c2; } (Chrome, Safari, Opera)
:-moz-placeholder { color: #c2c2c2; } (Firefox 18 ou inferior)
::-moz-placeholder { color: #c2c2c2; } (Firefox 19 ou superior)
:-ms-input-placeholder { color: #c2c2c2; } (Internet Explorer)