在HTML日期输入中改变Chrome日历图标的颜色

Question

我有一些困难样式的超文本标记语言5日期输入在Chrome。

使用标记，例如

我想将右侧的日历图标设置为白色，以便与文本的颜色相匹配。

< code >::-WebKit-calendar-picker-indicator 看起来是一个可能的选择。在此设置背景颜色会改变图标后面的颜色(如预期的那样)。然而，我找不到任何对图标颜色本身有影响的参数。

Answer 1

Shadow DOM样式设置了一个背景图像，在CSS中无法与之交互（filtercolor继承图标颜色，则此方法将向前兼容，代价是拥有一个“硬编码”图标：

::-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>');
}

Answer 2

另一种方法是将“配色方案”设置为深色。

input {
  color-scheme: dark;
}

<input type="date" />

Answer 3

我已经设法解决了这个问题，现在使用CSS过滤器将黑色转换为白色

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

然而，这感觉相当脆弱，远不理想。