Como mudar a cor do placeholder de um input com CSS

Neste artigo você vai aprender a como mudar a cor do placeholder de um input utilizando apenas CSS, para deixar seus formulários atraentes!

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre HTML, CSS e formulários!

Nem sempre a cor do placeholder padrão do input é interessante para o layout do nosso site

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Então precisamos comumente alterar o estilo do mesmo, para nossa alegria isso é muito simples

Vamos utilizar um pseudo-seletor chamado ::placeholder, este terá como papel principal mudar qualquer regra de CSS do placeholder de um input

Veja um exemplo prático:

<input type="text" placeholder="Algum texto">

Este será o nosso HTML, agora vamos ao CSS:

input::placeholder {
  color: red;
}

Agora a cor do placeholder do input será vermelha, veja que a cor do texto digitado não muda, isso é alterado via regra no próprio input

Você pode seguir a mesma lógica para alterar o placeholder de um textarea

Veja o código de exemplo:

textarea::placeholder {
  color: blue;
}

Agora a cor do placeholder do seu elemento de textarea será azul

Lembrando que o placeholder é a dica que os desenvolvedores inserem, para guiar o usuário em como ele deve preencher o input, que dados são necessários para o mesmo

A cor do texto digitado em qualquer input ou textarea, deve ser alterada via propriedade color no próprio seletor do input

Conclusão

Neste artigo você aprendeu a mudar a cor do placeholder de um input

Utilizamos o pseudo-seletor ::placeholder, que nos dá a possibilidade de alterar os estilos do placeholder de um input

Vimos também que é possível alterar o placeholder da tag textarea

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube