ios safari 的 input:disabled 颜色无法仅靠 color 和 opacity 修改，必须同时设置 -webkit-text-fill-color 和 -webkit-opacity；否则底层 ua 样式会强制覆盖，导致样式失效。
直接结论：iOS Safari 对 input:disabled 应用的是硬编码的透明度（opacity: 0.4）和系统级文字填充色，仅靠 color 和标准 opacity 无法覆盖，必须同时设置 -webkit-text-fill-color 并重置 -webkit-opacity。
为什么 iOS Safari 的 input:disabled 颜色改不掉
iOS Safari（包括所有基于 WebKit 的 WebView）对禁用输入框做了两层强制样式：一是隐式应用 opacity: 0.4，二是用 -webkit-text-fill-color 覆盖所有 color 声明。开发者工具里看到的只是表层 CSS，底层 User Agent 样式会优先生效。哪怕你写了 color: #333; opacity: 1;，它依然显示为浅灰——因为 -webkit-text-fill-color 还是系统默认的浅色值。
实操写法：四行必须同时存在
以下规则缺一不可，适用于所有 iOS Safari 及其衍生环境（如微信内置浏览器、钉钉 WebView）：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
input:disabled,
input[disabled] {
color: #333;
opacity: 1;
-webkit-text-fill-color: #333;
-webkit-opacity: 1;
}
-
color是给非 WebKit 浏览器（如 Chrome Android）准备的兜底 -
opacity: 1覆盖部分旧版 WebKit 的 opacity 继承 -
-webkit-text-fill-color才是真正控制字体颜色的钥匙，必须显式设值 -
-webkit-opacity是 iOS 15 之前某些版本必需的额外重置项，漏掉会导致opacity: 1失效
遇到 readonly 替代方案时的坑
有人用 readonly 绕过 disabled 兼容问题，但容易踩三个雷：
- 加了
readonly却没处理光标：iOS 上仍会弹出软键盘或显示闪烁光标，需配合-webkit-user-select: none或pointer-events: none -
readonly不具备语义禁用能力：屏幕阅读器不会播报“已禁用”，对无障碍不友好；而disabled有原生语义支持 - 若同时用了
readonly和disabled（比如 JS 动态切换），iOS 会优先按disabled渲染，导致样式冲突
深色模式下要单独处理
在 @media (prefers-color-scheme: dark) 中，别直接复用浅色模式的 #333。iOS 深色模式下，-webkit-text-fill-color 若仍设为深灰，会和背景对比度过低。建议：
- 深色主题中把
-webkit-text-fill-color改为#a0a0a0或hsl(0, 0%, 70%) - 避免用
filter: grayscale()，它在深色模式下会让文字发“脏”，且 Safari 对 disabled 元素上 filter 的支持不稳定 - 务必测试
::placeholder在:disabled下是否可见——iOS Safari 默认会隐藏它，需显式写input:disabled::placeholder { color: #888; }
最常被忽略的点是：只改了 color 就以为完事了。iOS Safari 的 -webkit-text-fill-color 是独立于 CSS color 层的渲染通道，不显式覆盖，它永远按系统逻辑走。这个细节一旦漏掉，整套禁用样式在真机上就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
