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

Question

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

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

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

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

Answer 1

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

input {
  color-scheme: dark;
}

<input type="date" />

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

Answer 2

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

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

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

Answer 3

Shadow DOM 样式设置了一个background-image不能在 CSS 中交互的（除了filter）。一种选择是替换整个图像，您可以在其中设置任何填充颜色，并且此方法将向前兼容，以防 Chrome 决定从color以后继承图标颜色，代价是具有“硬编码”图标：

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

另一个例子是；

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  opacity: 0.6;
  filter: invert(0.8);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1
}

Answer 5

您实际上可以使用该filter属性变得相当有创意。

• invert(100%) 将图标变成白色
• brightness(50%) 让它变灰
• sepia(100%) 使其饱和并使其...棕褐色
• saturate(10000%) 提高饱和度并将其变成鲜红色

之后，您可以hue-rotate尝试更改色调。hue-rotate(240deg)把它变成蓝色，hue-rotate(120deg)把它变成绿色等等。如果你想获得一个真正特定的颜色，你应该查看这个关于如何仅使用 CSS 过滤器将黑色转换为任何给定颜色的问题。