Safari 18中CSS变量在表单控件中失效，主因是渲染边界导致变量无法穿透、伪元素继承分离及框架样式覆盖；需显式在控件或伪元素内重声明变量，并添加fallback值。
CSS变量在Safari 18中表单控件颜色异常，根本不是Safari 18“不支持var()”，而是变量被作用域隔离、伪元素继承失效、或被框架重置样式静默覆盖——它压根没传到input或::placeholder上。
表单控件里var(--color)不生效，大概率卡在作用域链第一层
表单控件（尤其是input、select、textarea）在Safari中对CSS变量的继承非常保守。即使你在:root定义了--text-color，直接写input { color: var(--text-color); }也可能无效——因为Safari会把原生控件视为“渲染边界”，变量不会自动穿透。
- 必须显式在控件选择器内重新声明变量，例如：
input { --text-color: var(--text-color); color: var(--text-color); } - 若用Shadow DOM封装表单组件（如Web Component），变量必须通过
host.style.setProperty()注入，不能依赖父级:root - 检查DevTools的Elements面板：选中
input→ Styles → 看color是否显示为var(--text-color)且未被划掉；如果显示为initial或inherit，说明变量根本没解析出来
::placeholder在Safari 18中颜色丢失，90%是伪元素没拿到变量值
Safari 18虽已全面支持标准::placeholder，但它对伪元素中var()的求值逻辑和主元素分离。你写了input { --placeholder-color: #666; } input::placeholder { color: var(--placeholder-color); }，Safari可能仍回退到默认灰。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须把变量声明直接放在伪元素规则里：
input::placeholder { --placeholder-color: #666; color: var(--placeholder-color); } - 避免依赖
opacity控制透明度——Safari 18对::placeholder的opacity支持不稳定，容易让颜色发虚；改用color: rgba(102, 102, 102, 0.7)更可靠 - UI框架（如Ant Design）常重置
::placeholder并设!important，此时你的var()会被覆盖；临时禁用所有第三方CSS，只留你的规则验证是否真失效
按钮/滑块等控件颜色异常，常因-webkit-appearance阻断变量传递
像input[type="range"]、input[type="checkbox"]这类控件，在Safari中启用-webkit-appearance: none后，虽然能自定义样式，但也会切断部分CSS变量的继承路径——尤其当变量用于background或border-color时。
立即学习“前端免费学习笔记（深入）”；
- 不要只靠
var(--accent)设background；补一层硬编码fallback：background: #3b82f6; background: var(--accent, #3b82f6); - 对
input[type="range"]，::-webkit-slider-thumb不继承父级变量，必须单独声明：input[type="range"]::-webkit-slider-thumb { --thumb-color: var(--accent); background: var(--thumb-color); } - Chrome/Firefox允许变量跨伪元素继承，Safari 18不行——这是设计差异，不是bug，别指望“统一写法”能通吃
真正棘手的点不在语法，而在Safari把表单控件当成“黑盒”来处理：它不保证变量穿透、不保证伪元素继承、也不保证框架样式不拦截。调试时别只盯着var()写没写对，先看Computed里那个属性值是不是真的来自你的var()声明——很多时候，它连解析都没开始。
