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.