如何解决表单加载时输入框默认invalid及输入后不切换为valid的问题

问题根源 #

默认的:invalid伪类会在页面加载完成后立即匹配所有带有required属性且为空的输入框，导致初始状态就显示红色虚线边框。同时，由于该伪类未区分用户是否与输入框进行过交互，即使输入有效值后，部分浏览器仍会因为表单整体存在未填充的必填项，或伪类触发逻辑问题，无法正常切换到:valid对应的样式。

解决方案 #

方案1：使用现代浏览器支持的:user-invalid/:user-valid伪类 #

这两个伪类仅在用户与输入框交互（如输入内容、失去焦点）后才会触发状态判断，完美避开初始加载时的误触发：

input:user-invalid {
  border: 2px dashed red;
}
input:user-valid {
  border: 2px solid black;
}

方案2：结合:dirty伪类兼容旧浏览器 #

:dirty表示用户已修改过的输入框，通过它可以区分初始空状态和用户交互后的状态：

/* 设置默认边框样式（页面加载时的状态） */
input {
  border: 2px solid black;
}
/* 用户修改后内容无效时显示错误样式 */
input:dirty:invalid {
  border: 2px dashed red;
}
/* 用户修改后内容有效时保持有效样式 */
input:dirty:valid {
  border: 2px solid black;
}

额外说明 #

原代码中CSS规则顺序不存在问题，但:invalid的全局触发逻辑不符合实际交互需求。上述两种方案都能实现“初始无错误样式，交互后根据输入有效性切换样式”的效果，可根据浏览器兼容性需求选择。

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