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
.