Change color of Chrome's calendar icon in HTML Date Input

Question

I am having some difficulty styling the HTML 5 Date input in Chrome.

Using mark up such as

Answer 1

You can actually get rather creative using the filter property.

• invert(100%) turns the icon white
• brightness(50%) makes it gray
• sepia(100%) saturates it and makes it... sepia
• saturate(10000%) pumps the saturation up and turns it bright red

After that you can play around with hue-rotate to change the hue. hue-rotate(240deg) turns it blue, hue-rotate(120deg) turns it green etc. If you want to get a really specific color you should check out this question on how to transform black into any given color using only CSS filters.

Answer 2

Another example is;

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  opacity: 0.6;
  filter: invert(0.8);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1
}

Answer 3

I've managed to work around it for now using a CSS filter to invert the black color to white

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

However this feels quite fragile and far from ideal.