0
3.7K
ViewsChange color of Chrome's calendar icon in HTML Date Input
I am having some difficulty styling the HTML 5 Date input in Chrome.
Using mark up such as
<input type="date" max="2020-06-03" value="2020-06-01">, with some background and font color styling in CSS, renders in Chrome as:
I would like to make the calendar icon on the right hand side white, so it matches the color of the text.
::-webkit-calendar-picker-indicator looked like a possible candidate. Setting the background color on this changes the color behind the icon (as expected). However I can't find any parameter that has an effect on the icon color itself.
6 answers
Answer question0
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.
0
You can actually get rather creative using the filter property.
invert(100%)turns the icon whitebrightness(50%)makes it graysepia(100%)saturates it and makes it... sepiasaturate(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.
0
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
}
0
The Shadow DOM style sets a background-image which can not be interacted with in CSS (except for filter). One option is to replace the whole image where you can set any fill color and this method will be forward-compatible in case Chrome decides to inherit the icon color from color later on, at the cost of having a "hardcoded" icon:
::-webkit-calendar-picker-indicator {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}
0
Another way, is by setting the "color-scheme" to dark.
input {
color-scheme: dark;
}<input type="date" />FYI: this will also put the popup in dark mode.
0
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
margin: 0px;
margin-right: 20px !important; }