:user-valid/:user-invalid 专用于用户交互后的校验反馈，仅在用户编辑且值合法/非法时匹配，避免初始误报；需配合HTML约束属性及setCustomValidity使用，支持Chrome102+/Firefox119+/Safari17.4+，旧版需降级处理。
:user-valid 和 :user-invalid 不是“增强版”的 :valid/:invalid，而是语义上完全不同的判断逻辑：它只在用户**真实编辑过字段且当前值通过校验**时才匹配。页面一加载就绿、一聚焦就红的问题，靠它天然解决。
为什么:user-valid比:valid更适合做用户反馈
:valid 只问“这个值现在合不合法”，而 :user-valid 问的是“用户动过这个框，而且现在填对了”。空的 required 字段加载即 :invalid，但永远不匹配 :user-invalid——直到用户点进去又删空、或输错再失焦。
- 初始状态完全中立：没交互过的字段，
:user-valid和:user-invalid都不生效，CSS 不会强制渲染任何验证色 - 避免“未操作先报错”：用户第一次看到表单时，不会被满屏红框/绿框干扰注意力
- 自动兼容中间态：比如
type="number"输入"-"或"12."时，:invalid会立刻触发，但:user-invalid要等用户离开该字段（blur）或提交表单后才判定——这更符合人对“输入完成”的直觉
:user-valid/user-invalid 的浏览器支持与降级方案
截至 2026 年 9 月，:user-valid 和 :user-invalid 在 Chrome 102+、Firefox 119+、Safari 17.4+ 中已稳定支持。旧版本 Safari（如 16.x）和部分 Android WebView 仍不识别。
- 检测是否可用：
if (CSS.supports('selector(:user-valid)')) { /* 启用原生方案 */ } - 降级到
.touched:valid/.touched:invalid：监听input或blur事件，给元素加touched类，再写对应 CSS 规则 - 折中兼容写法：
input:not(:placeholder-shown):valid和input:not(:placeholder-shown):invalid，但前提是每个字段都设了placeholder属性——这有可访问性风险（placeholder 不是 label）
如何正确配置 HTML 才让:user-valid 生效
:user-valid 不是魔法，它依赖浏览器原生校验机制。如果 HTML 没配约束，伪类永远不触发。
立即学习“前端免费学习笔记（深入）”；
- 必须带至少一个校验属性：
required、type="email"、type="url"、minlength="2"、pattern="[a-z]{3}"（注意：pattern 值不带前后斜杠） - 别用
type="phone"或type="custom"：这些会被浏览器降级为text，失去所有校验能力 - 自定义校验（如用户名是否已存在）必须显式调用
setCustomValidity("")（合法）或setCustomValidity("已被占用")（非法），否则:user-valid和:user-invalid完全不响应 - 禁用原生弹窗不影响伪类：
novalidate在 form 上只关提示气泡，不关状态计算
样式组合时容易忽略的细节
把 :user-valid 和 :focus、:hover 一起用时，边界情况容易出错。
- 不要写
input:focus:user-valid { border-color: green; }—— 这会让用户聚焦后输错字，依然保持绿色边框，掩盖错误 - 推荐分层表达：
border-color表验证结果，box-shadow表聚焦状态，互不干扰 - 显式覆盖优先级：
input:user-invalid:not(:focus) { border-color: #d32f2f; }+input:focus { box-shadow: 0 0 0 2px #2196f3; }+input:focus:user-invalid { border-color: #d32f2f; } - 禁用 transition：
input:user-invalid { transition: none; }—— 错误反馈需要明确即时，动画延迟会削弱警示效果
真正难的不是写对那行 input:user-valid，而是确保每个字段的 HTML 约束准确、JS 自定义校验调用完整、以及在 focus/hover/invalid 多状态叠加时不互相覆盖视觉意图。浏览器只管算状态，怎么呈现，还得人来理清楚。
