在HTML日期输入中更改Chrome日历图标的颜色 [英] Change color of Chrome's calendar icon in HTML Date Input

问题描述

在Chrome中设置HTML 5日期输入的样式时遇到了一些困难.

I am having some difficulty styling the HTML 5 Date input in Chrome.

使用标记，例如 <input type="date" max="2020-06-03" value="2020-06-01">，在CSS中具有某些背景和字体颜色样式，在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看起来像是一个可能的候选者.以此设置背景色会更改图标后面的颜色(如预期).但是我找不到对图标颜色本身有影响的任何参数.

::-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.

推荐答案

我现在已经设法使用CSS滤镜将黑色转换为白色

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.

这篇关于在HTML日期输入中更改Chrome日历图标的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！