表单元素颜色不随CSS变量更新，根本原因是原生控件（input/select/textarea）默认不继承color/background-color，且部分浏览器对var()支持有限，必须显式声明各状态样式并覆盖伪元素、option等特殊节点。
为什么表单元素颜色不随CSS变量更新
最常见的现象是：input、select、textarea 的边框、背景、文字色没变，哪怕你已经改了 :root 里的 --form-bg 和 --form-text。根本原因不是变量没定义，而是这些原生控件默认不继承 color 或 background-color，且部分浏览器（尤其是 Safari）对 var() 在伪元素或系统控件上的支持有限。
必须显式给每个表单元素写样式，不能只靠继承：
-
input、select、textarea都要单独声明background-color: var(--form-bg, #fff)和color: var(--form-text, #333) -
input:focus、select:focus等状态也要用变量，比如border-color: var(--form-focus, #007bff) - 别漏掉
option：它不继承父级color，得单独写select option { color: var(--form-text); } - Firefox 对
textarea的resize手柄不响应变量，需用::-moz-resizer单独控制（但该伪元素不支持var()，只能降级为固定色）
如何让按钮和输入框共享主题但保持语义区分
表单里既有 button 又有 input[type="submit"]，它们该用同一套变量，但又不能完全一样——比如提交按钮需要高对比度，重置按钮要弱化。CSS 变量本身不支持条件分支，得靠选择器精度和命名策略绕过。
- 定义基础变量：在
:root中设--btn-primary-bg、--btn-secondary-bg、--input-border，而不是只用一个--primary - 用语义类而非类型选择器：写
.btn--submit { background-color: var(--btn-primary-bg); }，而不是input[type="submit"] { ... }，避免后期难以覆盖 - 若必须用原生标签，提高选择器权重：例如
input[type="submit"].btn比input[type="submit"]更易被主题规则覆盖 - 禁用
!important：它会让变量失效；真要强制某处颜色，直接改变量值本身，比如[data-theme="high-contrast"] input { --btn-primary-bg: #000; }
data-theme 切换时表单控件闪动或卡顿怎么办
点击按钮切换 data-theme 后，input 边框“跳一下”、光标消失半秒、甚至输入中断——这不是 JS 问题，而是浏览器重绘策略导致的。表单控件对样式变更特别敏感，尤其涉及 border、box-shadow 或 outline 时。
立即学习“前端免费学习笔记（深入）”；
- 只对轻量属性加过渡：
transition: background-color 0.2s, color 0.2s;，去掉border和outline的 transition - 避免在
:focus状态里用var(--form-focus)动态计算阴影或渐变——Safari 渲染慢，改用预设的 class 如.focus-ring-dark - 移动端 iOS 上，
input获得焦点时会强制重排，建议在data-theme切换后加requestAnimationFrame延迟触发，减少冲突 - 如果用了第三方 UI 库（如 Bootstrap），检查其 CSS 是否硬编码了
border-color: #ced4da—— 这类规则会覆盖var()，得用更高权重选择器或!important（仅此处可破例）
为什么 placeholder 颜色总不跟着主题变
::placeholder 是个特例：它不继承父级 color，也不自动响应 var()，各浏览器实现差异大。Chrome 支持 color: var(--placeholder-color)，Firefox 却要求写成 ::-moz-placeholder 并重复声明。
- 必须为每个浏览器前缀单独写：
input::placeholder { color: var(--placeholder-color, #6c757d); }、input::-webkit-input-placeholder { color: var(--placeholder-color, #6c757d); }、input::-moz-placeholder { color: var(--placeholder-color, #6c757d); } - 别指望 fallback 值能跨浏览器统一：Firefox 的
::-moz-placeholder不支持var()fallback 回退，所以var(--placeholder-color, #6c757d)在 Firefox 里实际生效的是#6c757d，不是变量值 - 如果主题切换频繁，placeholder 颜色延迟更新是常态——这是浏览器渲染管线限制，无法彻底消除，只能接受并确保 fallback 值足够可用
