如何移除input[type="date"]输入框的占位符文本？

我之前碰到过一模一样的场景，带min/max范围验证的input[type="date"]确实会让常规的WebKit伪元素样式失效——哪怕输入框是空的，浏览器也会把它判定为处于:in-range状态，导致你原来写的样式规则没法精准命中空输入框的占位符文本。

这里给你两个针对性的解决方案，覆盖主流浏览器：

1. 针对WebKit内核浏览器（Chrome、Edge、Safari） #

直接用:not([value])定位没有输入任何日期的输入框，不管它是否处于范围验证状态，都隐藏年/月/日的占位符文本：

input[type="date"]:not([value])::-webkit-datetime-edit-year-field,
input[type="date"]:not([value])::-webkit-datetime-edit-month-field,
input[type="date"]:not([value])::-webkit-datetime-edit-day-field {
  color: transparent;
}

2. 兼容Firefox浏览器 #

Firefox对date输入框的占位符处理逻辑不同，直接针对空输入框的::placeholder设置透明即可：

input[type="date"]:not([value])::placeholder {
  color: transparent;
}

把这两段CSS结合起来，就能在主流浏览器里完美隐藏带范围验证的date输入框的占位符文本了。

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