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

Question

我在 Chrome 中对 HTML 5 Date 输入进行样式设置时遇到了一些困难。

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

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

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

标签： htmlcssgoogle-chrome

Answer 1

我现在已经设法解决它，使用 CSS 过滤器将黑色反转为白色

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

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