如何使用CSS选中谷歌Chrome禁用date输入的webkit-datetime-edit-year-field？

原因分析 #

Chrome 针对禁用状态的表单内置伪元素，默认设置了带!important的浏览器内置样式，普通的color声明优先级不足以覆盖，且日期控件的内置编辑伪元素对-webkit-text-fill-color属性的响应优先级高于普通color属性，这是之前写法不生效的核心原因，你写的第二种选择器本身的结构逻辑是正确的。

解决代码 #

/* 正常状态样式 */
.field input[type='date']:in-range::-webkit-datetime-edit-year-field {
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 禁用状态样式 */
.field input[type='date']:disabled:in-range::-webkit-datetime-edit-year-field {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

额外排查点 #

如果你使用的是 CSS Modules，可额外确认.field类编译后的最终类名和 DOM 结构上挂载的类名一致即可，不需要调整选择器的属性顺序。

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