Icon color of html5 input date picker

Question

How can I change the icon color of the native HTML5 date input (<input type="date" />)? Is it possible to change the calendar icon color to HEX: #018bee or RGB: (1, 139, 238)? I saw a post saying that it was possible using filters, but I was unsuccessful.

Codepen Example: https://codepen.io/gerisd/pen/VwPzqMy

HTML:

 <input type="date" id="deadline" name="deadline" value="2021-01-01" required>

CSS:

#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);
}

Ya that's the native date input, I haven't change much to it. Also, I added the codepen example. — David, Apr 06 '21 at 20:27
Looks like it's working in the pen. I use this to calculate the filter for specific colors: https://codepen.io/sosuke/pen/Pjoqqp — StefanBob, Apr 06 '21 at 21:07
Does this answer your question? [Change color of Chrome's calendar icon in HTML Date Input](https://stackoverflow.com/questions/62162645/change-color-of-chromes-calendar-icon-in-html-date-input) — Syed M. Sannan, Aug 12 '22 at 15:35

score 2 · Answer 1 · answered Apr 12 '21 at 00:46

2

Have you tried using webkit? I found a similar qustion from enter link description here

try this code from that question maybe:

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

}

answered Apr 12 '21 at 00:46

steak

23
6

Icon color of html5 input date picker

1 Answers1