表单校验失败时需通过JS添加.invalid类或data-invalid属性，CSS中用[ data-invalid ]{border-color:var(--error);}控制样式；placeholder变色须用.invalid::placeholder{color:var(--error);}；多状态复用--state-color变量并由JS动态赋值；transition对CSS变量无效，应直接操作borderColor或使用@property（兼容性差）。
表单校验失败时如何用 --error 变量控制边框和提示色？
CSS 变量本身不响应 JavaScript 的校验逻辑，必须靠 JS 主动切换 class 或设置 style.setProperty() 才能触发状态变化。直接写 :invalid 伪类配合 var(--error) 是无效的——因为伪类不改变自定义属性值，只影响选择器匹配。
- 校验失败时，给
<input>添加data-invalid属性或.invalidclass，再在 CSS 中用[data-invalid] { border-color: var(--error); } - 不要用
:invalid直接读取变量，它无法“驱动”变量更新 -
--error的初始值建议设为#f44336这类明确色值，避免未声明时回退到currentColor导致不可控
input::placeholder 在校验失败时能否随变量变色？
可以，但必须确保 placeholder 选择器作用于带状态标记的元素，比如 .invalid::placeholder，而不是全局写 ::placeholder { color: var(--error); }——后者会让所有 placeholder 都变红，不管是否校验失败。
- Chrome/Edge 支持
::placeholder，Firefox 需加::-moz-placeholder兼容 - 变量要写在生效的选择器里：
.invalid::placeholder { color: var(--error); } - 如果 placeholder 文字消失或颜色没变，大概率是 selector 优先级不够，或父元素
color覆盖了var(--error)
多个校验状态（错误/警告/成功）怎么复用同一组变量？
别为每种状态都定义一套变量（如 --error-color、--warn-color），而是用一个主变量 --state-color，由 JS 根据校验结果动态赋值：
input.setCustomValidity('邮箱格式错误');
input.classList.add('invalid');
input.style.setProperty('--state-color', 'var(--error)');- CSS 里统一用
border-color: var(--state-color);，避免重复声明 -
--error、--warn、--success作为基础色定义在 :root，仅作“色值仓库”，不直接用于样式 - 注意：
style.setProperty()设置的是内联样式，会覆盖 CSS 文件里的var(--error)声明，所以基础变量别写在元素级 style 里
为什么 transition: border-color 在变量切换时不生效？
因为 CSS 变量不是可过渡的原生属性，border-color: var(--error) 的过渡依赖于 --error 值本身的变更——而浏览器不把变量值变化视为可动画属性。实际生效的是 border-color 的计算结果，但变量更新不触发重绘动画。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用 JS 同时设置
border-color和transition，或改用outline+outline-offset配合变量做视觉反馈 - 更稳妥的方式是放弃变量过渡，直接操作
element.style.borderColor = 'red'，再让 CSS 处理 transition - 如果坚持用变量，可用
@property（Chrome 123+）注册--state-color并声明inherits: false; syntax: '<color>';，但兼容性极差，生产环境慎用
变量本身只是“值的占位符”，它不自带行为。校验逻辑、状态标记、样式响应，三者必须由 JS 和 CSS 协同绑定，缺一不可。最容易被忽略的是：变量值变了，不代表对应样式属性自动重绘或过渡——那得靠你告诉浏览器“这个属性值得动”。
