怎么用 :invalid 让输入框自动标红
直接加 :invalid 样式就行，但得先确保表单控件有校验约束（比如 required、type="email"），否则浏览器根本不会触发这个伪类。它只对「原生校验失败」生效，不是你随便输点啥就变红。
常见错误是写了 :invalid 却没反应——八成是没加 required 或用了自定义校验（比如 JS 的 setCustomValidity()）但没调用 reportValidity()。
-
input[type="email"]输入 “abc” 会触发:invalid；输入 “a@b.c” 才算:valid -
input[required]空着失焦时立即触发:invalid（Chrome/Firefox 行为一致） - 如果用了
inputmode="numeric"但没配type="number"，:invalid不会管数字格式
:invalid 和 :user-invalid 有什么区别
:invalid 在任何校验失败时都可能匹配，包括用户还没操作过——比如页面一加载，空的 required 输入框就会被它选中。这容易导致“一上来就红”，体验不好。
:user-invalid 更靠谱：它只在用户**交互过且校验失败**后才生效（比如输完、失焦、提交时）。目前 Chrome 102+、Firefox 119+、Safari 16.4+ 支持，兼容性已够用。
立即学习“前端免费学习笔记（深入）”；
- 优先写
:user-invalid，降级到:invalid作为兜底：input:is(:user-invalid, :invalid) { border-color: #d32f2f; } - 别单独依赖
:invalid做视觉反馈，尤其对新用户不友好 - Safari 对
:user-invalid的触发时机略保守（比如要等到提交或显式调用checkValidity()）
为什么加了 :invalid 样式却没覆盖默认红边
浏览器内置样式权重低，但有些 UA 样式用了 !important（比如旧版 Edge），或者你的 CSS 选择器太弱。更常见的是：你写的规则被其他更具体的选择器压住了。
- 用
input:invalid比.form-input:invalid权重低，后者会赢 - 确保没在别的地方用
input:focus:invalid这类组合覆盖了基础状态 - 检查是否启用了
all: revert或 CSS reset 导致 UA 样式被清掉——这时:invalid本身还生效，但没默认边框可覆盖了 - 真要强覆盖，加
!important是最直白的办法：input:invalid { border-color: #d32f2f !important; }
配合 JS 时要注意什么
JS 主动设置校验状态（比如 input.setCustomValidity("不能为空")）后，:invalid 会响应，但有个关键前提：必须调用 input.reportValidity() 或触发表单提交，否则样式不更新。
-
setCustomValidity("")清空错误后，:invalid不会立刻消失——得再调一次reportValidity()或等下一次校验时机 - 用
addEventListener("invalid", ...)拦截事件时，它不冒泡，也不能阻止默认提示框（那是 UA 行为） - 如果用 JS 管理整个校验流程，干脆别依赖
:invalid，改用 class 切换更可控
:user-invalid 的渐进增强逻辑——不光是写上就完事，得确认它在目标浏览器里真能按预期时机触发，而不是退化成一加载就红的 :invalid。 
