Como mudar a cor do texto de preenchimento com CSS?

João E. -

Problema: Personalizando a Cor do Texto do Placeholder

O texto do placeholder em campos de formulário geralmente aparece em uma cor cinza clara padrão. Isso nem sempre combina com o design de um site. Mudar essa cor pode melhorar a consistência visual e a acessibilidade. No entanto, isso requer técnicas específicas de CSS.

Técnicas CSS para Mudar a Cor do Placeholder

Usando Pseudo-elementos

O pseudo-elemento ::placeholder é a maneira padrão de estilizar o texto do placeholder. Ele direciona o texto do placeholder em campos de formulário. Veja um exemplo:

::placeholder {
  color: #999;
}

Este método funciona na maioria dos navegadores modernos. Verifique a compatibilidade do navegador ao usar esta técnica.

Dica: Contraste do Placeholder

Certifique-se de que a cor do placeholder tenha contraste suficiente com o fundo do campo de entrada para melhor legibilidade. Use ferramentas como o Verificador de Contraste do WebAIM para confirmar a taxa de contraste.

Pseudo-classes e Pseudo-elementos Específicos de Navegadores

Para um suporte mais amplo de navegadores, pode ser necessário usar seletores específicos de fornecedores:

  • ::-webkit-input-placeholder para navegadores WebKit (Chrome, Safari, versões mais recentes do Opera):
::-webkit-input-placeholder {
  color: #999;
}
  • ::-moz-placeholder para Mozilla Firefox:
::-moz-placeholder {
  color: #999;
  opacity: 1;
}

Nota: O Firefox aplica uma opacidade ao texto do placeholder por padrão. Definir opacity: 1 mostra a cor como pretendido.

  • :-ms-input-placeholder para Internet Explorer e Edge:
:-ms-input-placeholder {
  color: #999;
}