Como alterar a cor do “placeholder”com css

  CSS, Navegadores

No HTML5, há a possibilidade de usar diversos atributos nos elementos html, e um deles é o placeholder.

CSS HTML 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)


LEAVE A COMMENT