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

【问题标题】：Change color of Chrome's calendar icon in HTML Date Input在 HTML 日期输入中更改 Chrome 日历图标的颜色
【发布时间】：2020-09-21 13:11:37
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您实际上可以使用filter 属性获得相当有创意的东西。

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

之后，您可以使用hue-rotate 来更改色调。 hue-rotate(240deg) 将其变为蓝色，hue-rotate(120deg) 将其变为绿色等。如果您想获得真正特定的颜色，您应该 check out this question on how to transform black into any given color using only CSS filters.

【讨论】：

【解决方案3】：

另一个例子是；

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
}

【讨论】：

【解决方案4】：

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

【讨论】：

这对我来说很完美。您现在可以将 SVG 文本中的填充颜色更改为您需要的颜色。太棒了，谢谢。