:invalid伪类需配合required等校验属性及用户交互才生效，否则不触发；推荐用:user-invalid实现用户操作后高亮，兼容性有限；后端错误需JS调用setCustomValidity和reportValidity同步样式；CSS变量须带默认值防失效，IE需class降级。
直接用 :invalid 伪类最省事，但必须配合 required、type="email" 等校验属性，且用户得交互过（比如失焦或提交），否则不会变红。
为什么写了 input:invalid { border-color: red; } 却没反应
根本原因不是 CSS 写错了，而是浏览器压根没判定这个输入框“非法”。:invalid 不是开关，它依赖两个前提：
-
input元素带原生约束属性：比如required、type="email"、pattern="[0-9]{6}"，纯type="text"输啥都不会触发 - 用户已与字段发生交互：Chrome/Firefox 对未失焦的空
required输入框可能延迟应用:invalid，Safari 更严格——不 submit 或不 blur 就不渲染 - 部分老版 Chrome 把
"abc"当作合法 email，导致type="email"+:invalid失效（实际应报错）
想让用户操作后才高亮？优先用 :user-invalid
:user-invalid 是更符合直觉的方案：只在用户输过、删过、失焦过，且验证失败时才生效。但它有兼容性限制：
- Chromium 102+（含新版 Edge/Chrome）和 Safari 16.4+ 支持；Firefox 目前不支持
- 推荐降级写法：
input:invalid:not(:user-invalid) { border-color: #ccc; }+input:user-invalid { border-color: #d32f2f; }，兼顾新旧 - 如果要全浏览器保底，JS 方案更稳：监听
blur或submit后调用inputElement.checkValidity()，再手动加class="error"
后端返回错误时怎么同步红边框
原生 :invalid 对后端业务错误完全无感，必须靠 JS 注入状态：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 收到后端响应（如
{ password: "密码错误" }）后，找到对应input[name="password"]，执行input.setCustomValidity("密码错误")，再立刻调input.reportValidity()触发原生提示和:invalid样式 - 清空错误时，必须调
input.setCustomValidity("")，否则:invalid一直挂着 - 别只改边框：配套的
label应加aria-invalid="true"，错误文案用aria-describedby关联，否则屏幕阅读器看不到 - 连续提交时，务必先
element.classList.remove("error")，再根据新结果决定是否加回——残留 class 是常见视觉 bug
用 CSS 变量控制红边框颜色要注意什么
用 --input-error 替代写死 #d32f2f 没问题，但变量必须作用在能触发重绘的上下文里：
- 不能只在
:root定义--input-error就完事——得在.error或:invalid规则块内设置border-color: var(--input-error, #d32f2f) - IE 完全不支持
:invalid和 CSS 变量，必须提供 class 降级方案：.input.error { border-color: #d32f2f; } - 别给边框加
transition：错误提示需要明确、即时的视觉反馈，渐变过渡反而削弱警示效果 - fallback 不可靠时（比如变量未定义），
border-color: var(--input-error)会退成initial（通常是 transparent），导致边框消失——务必写var(--input-error, #d32f2f)
真正难的不是让边框变红，而是让“红”出现的时机恰到好处：既不能用户一点击就红（太吓人），也不能提交失败后还绿着（太误导）。这需要把 HTML 属性、CSS 伪类、JS 生命周期和无障碍属性串成一条链，漏掉任意一环，红边框就只是个摆设。
