直接用 --input-error 变量控制边框颜色更灵活，但需在 :invalid 或 .error 作用域内定义；:invalid 依赖原生校验属性和用户交互才生效，纯 css 无法强制触发；css 变量须影响可重绘属性（如 border-color）才有效；兼容 ie 需降级为 class 方案；fallback 不可靠时应优先用 class 控制。
直接用 --input-error 变量控制边框颜色，比写死 border-color: #f00 更灵活，但变量必须在输入框生效的伪类（如 :invalid 或 .error）作用域内定义或继承，否则不会触发重绘。
为什么 :invalid 伪类有时不生效？
:invalid 依赖原生表单校验逻辑，只有带 required、type="email" 等校验属性，且用户已交互（如失焦或提交）后才会触发。纯 CSS 无法强制它“立刻变红”——它不是状态开关，而是浏览器根据 validity API 返回值动态应用的。
- 确保输入框有
required属性，或type值能被浏览器识别为可校验（如email、url、number） - 手动触发校验失败：调用
inputElement.setCustomValidity("x")后再inputElement.reportValidity() - 避免覆盖：某些 UI 框架会重置
:invalid样式，需提高选择器权重，例如input:invalid:not([type="hidden"]) { ... }
如何让 CSS 变量真正响应校验状态？
不能只靠 :invalid 切换变量值——CSS 变量本身不触发重绘，必须让它影响一个可动画/可重绘的属性（如 border-color）。推荐用 color-scheme 隔离或级联继承方式注入变量。
- 在
:invalid规则里直接设置border-color: var(--input-error, #f00)，而不是只定义--input-error - 若需 JS 控制，给输入框加
class="error"，并在该 class 下定义变量和样式：.input.error { --input-error: #d32f2f; border-color: var(--input-error); } - 注意继承链：变量定义位置必须在输入框计算样式时能访问到，
:root定义的变量全局可用，但局部--input-error在:invalid内定义时，仅对该匹配元素生效
兼容性与性能要注意什么？
:invalid 在所有现代浏览器中支持良好（Chrome 4+、Firefox 4+、Safari 5.1+），但 IE 完全不支持；CSS 变量在 IE 中也不可用。如果需兼容 IE，必须降级为 class 切换方案。
- 不要在
:invalid中写transition: border-color .2s—— 失焦瞬间边框突变是正常行为，加过渡反而干扰用户对错误的感知 - 避免在大量输入框上滥用
var(--input-error)而不设 fallback，未定义变量会导致边框消失（变成border-color: initial） - 若用 JS 动态更新变量，优先用
element.style.setProperty('--input-error', '#c00')，而非操作style.cssText，后者会清空已有内联样式
最易忽略的是变量 fallback 的可靠性——var(--input-error, #f00) 看似稳妥，但如果上级元素意外设置了 --input-error: transparent，错误提示就彻底隐形了。真要稳健，要么严格管控变量作用域，要么放弃变量、改用 class 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
