如何修改HTML5原生date输入框的日历图标颜色为指定色值

问题说明 #

原生<input type="date" />的内置日历图标默认显示为系统黑/灰色，需要将其调整为#018bee（HEX值）或(1, 139, 238)（RGB值）。此前尝试通过CSS滤镜调整未达到预期效果，现有基础代码如下：

基础HTML代码 #

<input type="date" id="deadline" name="deadline" value="2021-01-01" required>

原有CSS代码 #

#deadline{
  width: 100%;
  min-width: 100px;
  border: none;
  height: 100%;
  background: none;
  outline: none;
  padding-inline: 5px;
  resize: none;
  border-right: 2px solid #dde2f1;
  cursor: pointer;
  color: #9fa3b1;
  text-align: center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  filter: invert(0.8) sepia(100%) saturate(10000%) hue-rotate(240deg);
}

滤镜方案失效原因 #

Chrome等Webkit内核浏览器在版本迭代中，将::-webkit-calendar-picker-indicator对应的原生日历图标基准色从原有的深灰色调整为纯黑色。网上流传的旧滤镜参数均是基于深灰色图标调校的，参数和当前的黑色基准色不匹配，因此调整后无法得到目标蓝色效果。

可行解决方案 #

方案1：校准滤镜参数（无额外DOM改动） #

直接调整滤镜参数，匹配纯黑基准色到目标蓝色的色彩转换关系，无需修改原有DOM结构，可用配置如下：

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  /* 精准匹配#018bee色值的滤镜参数 */
  filter: invert(33%) sepia(89%) saturate(2643%) hue-rotate(196deg) brightness(103%) contrast(101%);
}

注意：该方案的局限是色彩转换完全依赖浏览器原生图标的基准色，Chrome大版本更新后原生图标色值发生变化时，可能需要重新校准参数，不同屏幕下也可能存在细微色差。

方案2：自定义图标替换（100%精准控色） #

为了实现和设计值完全一致的颜色，避免滤镜带来的偏差，可以隐藏原生图标，替换为自定义SVG图标，该方案兼容性更强，颜色完全可控：

1. 给date输入框外层包裹一个定位容器：

<div class="date-wrapper">
  <input type="date" id="deadline" name="deadline" value="2021-01-01" required>
</div>

2. 新增样式，隐藏原生图标但保留点击触发区域，用伪元素绘制目标色值的日历图标：

.date-wrapper {
  position: relative;
  width: 100%;
}
/* 原有#deadline的样式保持不变 */
#deadline{
  width: 100%;
  min-width: 100px;
  border: none;
  height: 100%;
  background: none;
  outline: none;
  padding-inline: 5px;
  resize: none;
  border-right: 2px solid #dde2f1;
  cursor: pointer;
  color: #9fa3b1;
  text-align: center;
}
/* 隐藏原生图标，保留点击热区 */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
/* 自定义图标，直接设置fill为目标#018bee色值 */
.date-wrapper::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23018bee'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

该方案下，图标颜色完全由SVG的fill属性控制，不存在任何滤镜转换的偏差，在所有Webkit内核浏览器中都能稳定显示#018bee的指定颜色。

内容的提问来源于stack exchange，提问作者David