表单控件不继承 :root css 变量是规范行为，需显式声明；第三方库常绕过变量链，应优先使用其主题 api；transition 不能直接作用于变量名，须作用于实际属性；兼容性差时应改用 class 切换方案。
表单控件没读到 :root 变量，因为它们不继承 CSS 自定义属性
HTML 表单控件（<input>、<textarea></textarea>、<select></select>、<button></button>）在多数浏览器中默认不继承 :root 定义的 CSS 变量——不是 bug，是规范行为。它们有自己的 UA 样式（user agent stylesheet），且对 var(--x) 的解析能力有限，尤其在未显式声明继承时。
常见现象：主题切换后，普通 div 背景变暗了，但 <input type="text"> 仍是白底黑字；getComputedStyle(input).getPropertyValue('--bg') 返回空字符串。
- 必须显式给表单控件设置
color: var(--text-primary); background-color: var(--bg-primary);，不能依赖父级继承 - 伪元素（如
::placeholder、::file-selector-button）同样需要单独写规则，且部分伪类（如::-webkit-inner-spin-button）需加前缀 - 避免用
all: inherit强制继承——它会覆盖 UA 样式中的关键重置逻辑，导致光标、聚焦环等异常
第三方 UI 库的表单组件绕过了你的 CSS 变量链
Ant Design、Element Plus、Naive UI 等库大多采用“变量导出 + JS 注入”双轨机制。它们在构建时把 @primary-color 编译成硬编码值，或运行时通过 useThemeVars() 动态注入内联 style 标签——这些操作与你手动写的 :root 变量互不感知。
典型表现：你改了 document.documentElement.style.setProperty('--primary-color', '#52c418')，但 <el-input></el-input> 边框还是默认蓝，<n-button></n-button> 文字颜色没变。
- 检查该库是否提供
theme配置项（如 AntD 5.x 的ConfigProvider theme={{ token: { colorPrimary: '...' } }}），优先走官方 API - 若必须桥接 CSS 变量，确认库文档是否支持
cssVars模式（如 Naive UI 的useThemeVars({ cssVars: true })） - 不要在全局样式里写
.el-input { border-color: var(--border-color) !important }——!important会切断后续所有动态主题扩展能力
transition 对 var() 本身无效，表单控件“跳变”而非平滑过渡
CSS 变量名不是可动画属性，transition: --bg-primary 0.3s 是非法语法，浏览器直接忽略。表单控件看起来“瞬间切换”，其实是绑定它的原生属性（如 background-color）没声明过渡，或 UA 样式强制重绘打断了动画帧。
正确做法是让变量只作“值源”，动画落在实际属性上：
- 给表单控件写
transition: background-color 0.3s, color 0.3s, border-color 0.3s，而不是试图过渡变量名 - 确保变量更新和属性计算在同一次渲染周期内完成：用
requestAnimationFrame包裹setProperty后的 DOM 操作 - 某些控件（如
<select></select>在 Safari 中）根本不支持background-color过渡，需用opacity或transform模拟淡入效果
移动端 WebView 和旧版 Chrome 对表单变量支持不一致
Android WebView（尤其基于 Chromium 90 以下版本）和 iOS Safari 15.4 之前，对表单控件中 var(--x) 的解析存在兼容性断层：变量能读取，但不触发重绘；或仅在初始渲染时生效，切换后卡死。
最稳妥的兜底方案是放弃纯 CSS 变量驱动表单主题，改用 class 切换 + 属性选择器组合：
- 用
html[data-theme="dark"] input、html[data-theme="dark"] textarea写完整规则集，不依赖var() - 配合
prefers-color-scheme媒体查询做初始值预设，防止闪屏 - 对关键控件（如登录表单）加
data-force-theme属性，在 JS 切换主题时同步更新其 class，绕过继承链
真正难的不是写变量，而是确认每个表单控件都处在同一套变量作用域里——而浏览器根本没打算让它们待在一起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
