How to style HTML5 calendar icon

Question

I have an HTML5 input with type="date", thus:

<input type="date">

Is there any way to change the color of the calendar icon it brings natively? I’ve tried properties like -webkit-calendar-picker-indicator but does not change the icon color, only the font or background.

Answer 1

OBS: The solution below does not work in the Firefox browser. Check for compatibility in other browsers for this solution. Tests have been done and worked on Google Chrome and Brave browsers.

^{Thanking @Guilhermenascimento for the observation comment :)}

---

There is a possibility of using the filter and change the colors of the icon in question.

This response is based on that one and that one question and on Soen, which allows you to make a combinations using filter and properties such as invert, sepia, saturate, brightness and hue-rotate. In the example below, changing the values of hue-rotate, can result in different colors.

Examples:

• To the hue-rotate(20deg), we will have a reddish color:

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

• To the hue-rotate(240deg), we will have a bluish color for the icon:

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

You can still generate different combinations by changing the properties invert, sepia, saturate, brightness and hue-rotate.