如何让date类型输入框失焦显示已填值并实现CSS标签同步变色效果

方案说明 #

date类型输入框的原生特性和文本输入框存在差异，目前完全不借助JS的纯CSS无法实现非required场景下的已填值判断，核心限制如下：

1. date输入框没有空占位符状态，不支持:placeholder-shown伪类，无法复用文本输入框的判断逻辑
2. CSS属性选择器只能匹配HTML初始写死的value属性，无法响应用户选择日期后动态更新的输入值
3. 校验类伪类:valid在非required场景下，空值也会被判定为有效，无法区分空值和已填值

如果可以接受添加极少量无侵入的JS配合CSS实现，可完全达到需求效果，且不需要修改原有HTML结构：

CSS代码

input:focus~label { 
  color: lightblue; 
} 
/* 保留原有文本输入框逻辑 */
input:not([type="date"]):not(:placeholder-shown)~label { 
  color: blue; 
} 
input[type="date"] { 
  color: white; 
} 
input[type="date"]:focus,
input[type="date"].filled { 
  color: black; 
}
/* 已填值的date输入框对应label变蓝 */
input[type="date"].filled ~ label {
  color: blue;
}

JS代码

// 全局统一监听所有date输入框的变更，不需要单独绑定事件
document.addEventListener('input', e => {
  if(e.target.type === 'date') {
    e.target.classList.toggle('filled', !!e.target.value)
  }
})

如果确实完全不能使用JS，只能用纯CSS折中实现，可以给date输入框添加校验规则来区分空值和已填值，该方案兼容性一般，仅做参考：

input[type="date"]:valid ~ label {
  color: blue;
}

使用该方案时只需要给非required的date输入框添加pattern="\d{4}-\d{2}-\d{2}"属性即可，空值会被判定为无效，选择日期后会被判定为有效。

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