如何修改webkit内核浏览器date输入框的日历选择器图标颜色

你之前写的CSS不生效，是因为::-webkit-calendar-picker-indicator伪元素的图标颜色不受color属性控制，可根据需求选择以下两种方案实现绿色图标效果：

方案1：滤镜改色（无需替换图标，实现简单） #

该方案通过CSS滤镜直接修改原生图标颜色，适配webkit内核浏览器（Chrome、Edge、Safari）及火狐浏览器：

/* Webkit内核浏览器适配 */
input[type="date"]::-webkit-calendar-picker-indicator {
  /* 滤镜参数调整后可得到纯绿色效果 */
  filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(90deg) brightness(105%);
}

/* 火狐浏览器适配 */
input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(90deg) brightness(105%);
}

方案2：自定义图标（样式可控性更高） #

如果需要完全自定义图标样式，可以隐藏原生图标后自己添加背景图：

/* 隐藏Webkit端原生图标，保留点击触发区域 */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* 隐藏火狐端原生图标 */
input[type="date"]::-moz-calendar-picker-indicator {
  opacity: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* 给输入框添加自定义绿色日历图标 */
input[type="date"] {
  /* 内置绿色日历图标base64，可替换为你自己的图标资源 */
  background: #fff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3H16C16.5304 3 17.0391 3.21071 17.4142 3.58579C17.7893 3.96086 18 4.46957 18 5V17C18 17.5304 17.7893 18.0391 17.4142 18.4142C17.0391 18.7893 16.5304 19 16 19H4C3.46957 19 2.96086 18.7893 2.58579 18.4142C2.21071 18.0391 2 17.5304 2 17V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H5V1H7V3H13V1H15V3ZM4 8V17H16V8H4Z' fill='green'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 20px 20px;
  padding-right: 36px;
  box-sizing: border-box;
}

注意事项 #

如果样式仍不生效，可以打开浏览器开发者工具，检查对应伪元素的样式是否被更高优先级的规则覆盖，可临时加!important验证问题点。

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