2

Eu tenho um input do HTML5 com o type="date", dessa forma:

<input type="date">

Existe alguma forma de mudar a cor do ícone de calendário que ele traz nativamente? Já tentei propriedades como -webkit-calendar-picker-indicator mas não muda a cor do ícone, apenas a fonte ou o background.

1 Resposta 1

3

OBS: A solução abaixo não funciona no navegador Firefox. Verifiquem compatibilidade em outros navegadores para esta solução. Os testes foram feitos e funcionaram nos navegadores Google Chrome e Brave.

Agradeçendo ao @GuilhermeNascimento pela comentário de observação :)


Existe uma possibilidade de se usar o filter e alterar as cores do ícone em questão.

Esta resposta tem como base essa e essa pergunta e no SOen, que permite você fazer um combinações usando filter e propriedades como invert, sepia, saturate, brightness e hue-rotate. No exemplo abaixo, alterando os valores de hue-rotate, pode resultar em cores distintas.

Exemplos:

  • Para o hue-rotate(20deg), teremos uma cor avermelhada:

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.8) brightness(50%) sepia(100%) saturate(10000%) hue-rotate(20deg);
}
<input type="date">

  • Para o hue-rotate(240deg), teremos uma cor azulada para o ícone:

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.8) brightness(50%) sepia(100%) saturate(10000%) hue-rotate(240deg);
}
<input type="date">

Você ainda pode gerar diferente combinacões alterando as propriedades invert, sepia, saturate, brightness e hue-rotate.

3
  • 2
    Note que isso funciona em Chrome e provavelmente no Safari, mas não funciona em Firefox, claro que no Firefox não tem o tal ícone, então a solução aplicada para Chromium/Webklit funcionará bem. Portanto deixo o +1
    – Syzoth
    Commented 24/03/2021 às 19:02
  • 1
    @GuilhermeNascimento sim, mas como ele usou o webkit, achei que o AP já possa estaria ciente disso. Mas acho que vale a pena destacar a sua observacão na resposta. Commented 24/03/2021 às 19:20
  • 2
    Tem prefixos webkit que funcionam em Firefox (porque questões "históricas"). Por isso é sempre bom detalhar algumas coisas :)
    – Syzoth
    Commented 24/03/2021 às 19:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .