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
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