css变量应在:root中语义化声明错误色（如--error-color），避免嵌套var()和未声明使用；错误样式需统一用变量控制，结合aria-invalid确保可访问性；深色模式下应重定义变量而非改选择器，并兼顾disabled状态。
如何用CSS变量定义全局错误颜色
直接在 :root 里声明错误色变量，比散落各处的 #e74c3c 更易维护。变量名要带语义，比如 --error-color 而不是 --color-1，否则半年后你自己都得查 Git 历史才能确认它干啥用。
常见错误是把变量值写成带单位的（如 var(--error-color, red) 中误写成 red 以外的数值），或在未声明变量的地方直接使用——这会导致回退色失效，浏览器会忽略整条声明。
:root { --error-color: #e74c3c; --error-border: #c0392b; --error-bg: #fdf2f2; }- 所有表单控件的错误状态都基于这些变量计算，例如
border-color: var(--error-border); - 避免在变量中嵌套另一个
var()（如--error-light: color-mix(in srgb, var(--error-color), white 80%);），部分旧版 Safari 不支持
input:focus + .error 提示样式不生效？检查选择器优先级和状态顺序
很多人写 input.error:focus 或 .error input:focus，结果错误边框死活不出现。问题往往出在两个地方：一是 :focus 和 .error 类没同时存在；二是 CSS 优先级被更具体的规则覆盖（比如某个组件库的 input[type="text"] 规则权重更高）。
推荐用属性选择器 + 类组合确保可控性，比如 input[aria-invalid="true"]:focus，它比单纯靠 class 更语义化，也更容易和 JS 的校验逻辑对齐。
- 确保 JS 在校验失败时设置
aria-invalid="true"和class="error"两者之一（建议都设） - 不要依赖
:invalid伪类做视觉反馈——它只响应原生约束（required,type="email"），不响应自定义校验逻辑 - 如果用了 CSS-in-JS 或 Shadow DOM，变量可能无法穿透，需在对应作用域内重复定义
--error-color
textarea 和 select 的错误样式怎么复用同一套变量
它们和 input 的默认样式差异大，但错误表现逻辑一致：边框变红、文字提示变红、背景轻微警示。关键是别为每个元素重写一遍颜色值，而是统一调用变量，并用属性选择器区分渲染细节。
比如 select 的下拉箭头在某些浏览器里无法用 CSS 改颜色，强行改可能破坏可访问性；而 textarea 的 resize 手柄默认灰色，在错误态下也该同步变暗——这些细节容易被忽略，但用户能感知到“不统一”。
input.error, textarea.error, select.error { border-color: var(--error-border); color: var(--error-color); }-
textarea.error { background-color: var(--error-bg); }（input通常不加背景色，避免遮盖 placeholder） -
select.error::-webkit-appearance { /* 不覆盖 */ }—— 别动原生下拉样式，用background-image叠加警示图标更安全
深色模式下错误色对比度不够？用 prefers-color-scheme 动态调整变量
直接把 --error-color 写死成亮色，在深色背景下文字几乎看不见。不能只靠 color-contrast()（目前无浏览器支持），得手动适配。最稳妥的方式是在 @media (prefers-color-scheme: dark) 里重定义变量，而不是改选择器里的颜色值。
注意：有些设计系统会把错误色本身调浅（比如从 #e74c3c 改成 #ff6b6b），但这可能降低色盲用户的辨识度。更优解是保持色相不变，仅提升亮度并确保与背景的对比度 ≥ 4.5:1。
@media (prefers-color-scheme: dark) { :root { --error-color: #ff6b6b; --error-border: #ff5252; } }- 用 Chrome DevTools 的“Rendering”面板勾选 “Emulate CSS media feature prefers-color-scheme” 快速验证
- 避免在深色模式下把错误背景设成深红（如
#330a0a），它和黑色背景对比太弱，用户反而看不出哪里错了
实际项目里最容易漏的是 disabled 状态下的错误样式——很多团队只处理 input:enabled.error，结果用户看到一个灰掉的输入框还标着红边，既违和又误导。要不要显示错误，得由业务逻辑决定，而不是让 CSS 自动继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
