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

Question

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

使用 <input type="date" max="2020-06-03" value="2020-06-01"> 等标记，在 CSS 中使用一些背景和字体颜色样式，在 Chrome 中呈现为：

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

::-webkit-calendar-picker-indicator 看起来像是一个可能的候选人。在此设置背景颜色会更改图标后面的颜色（如预期）。但是我找不到任何对图标颜色本身有影响的参数。

原文由 peteredhead 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

然而，这感觉很脆弱，远非理想。

原文由 peteredhead 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 input {
  color-scheme: dark;
}

 <input type="date" />

仅供参考：这也会将弹出窗口置于暗模式。

原文由 Nickzn 发布，翻译遵循 CC BY-SA 4.0 许可协议