Как изменить цвет иконки родного Ввод даты HTML5 (<input type = "date" />
)?
Можно ли изменить цвет значка календаря на HEX: #018bee
или RGB: (1, 139, 238)
? Я увидел сообщение, в котором говорилось, что можно использовать фильтры, но мне это не удалось.
Пример Codepen: 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);
}
это собственный ввод даты в браузере?
Да, это родной ввод даты, я в нем особо не менял. Также я добавил пример кода.
Похоже, в ручке работает. Я использую это для расчета фильтра для определенных цветов: codepen.io/sosuke/pen/Pjoqqp
Спасибо, что переделал в цвет вплотную.
Не могли бы вы создать пример кода?