Is there a way to customize the color of the calendar icon in the HTML5 date input (
<input type="date" />#018bee or RGB: (1, 139, 238). I've read about using filters for this purpose, but my attempts so far have been unsuccessful.
https://i.sstatic.net/rL3gn.png
If you'd like to see an example, check out this Codepen: https://codepen.io/gerisd/pen/VwPzqMy
Here's the HTML code snippet:
<input type="date" id="deadline" name="deadline" value="2021-01-01" required>
And here's the CSS styling involved:
#deadline{
width: 100%;
min-width: 100px;
border: none;
height: 100%;
background: none;
outline: none;
padding-inline: 5px;
resize: none;
border-right: 2px solid #dde2f1;
cursor: pointer;
color: #9fa3b1;
text-align: center;
}
input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
border-radius: 4px;
margin-right: 2px;
filter: invert(0.8) sepia(100%) saturate(10000%) hue-rotate(240deg);
}