iOS Safari（尤其是12–14）对:disabled伪类支持不全，导致样式失效、仍可点击、焦点异常；需组合opacity: 0.45 + color: #999 + background-color: #f5f5f5 + pointer-events: none并显式控制class与DOM属性同步，确保视觉、触摸、键盘及可访问性四重保障。
移动端按钮加了 disabled 属性但样式没变、还能点、甚至焦点乱跳——不是你 CSS 写错了，是 iOS Safari（尤其是 12–14）压根不按标准渲染 :disabled。
为什么 :disabled 在 iOS 上经常不生效
iOS Safari 对 :disabled 的支持有明显缺口：它可能忽略 opacity、跳过 background-color 更新，甚至不触发 cursor: not-allowed。更麻烦的是，原生 <button disabled> 在某些 WebView 中仍能响应 touchstart，导致误触或穿透到下层元素。很多项目重置了 button { opacity: 1; }，直接把禁用态“洗掉”了。
-
:disabled只匹配真实存在的 HTMLdisabled属性；JS 设置el.disabled = true是有效的，但el.setAttribute('disabled', '')在旧版安卓上可能不触发行为 - 如果用
<div>或<span>模拟按钮，:disabled根本不匹配，必须靠 class 控制（如.btn--disabled） - 部分安卓 WebView 对继承的
color渲染异常，建议所有禁用态样式都写死，不要依赖父级继承
只用 opacity 是最危险的简化操作
单独写 button:disabled { opacity: 0.5; } 在 iOS 下大概率失效，且可访问性差——屏幕阅读器可能读出“按钮可用”，但实际点不动；低对比度还会让文字不可读（WCAG 要求文本与背景对比度 ≥ 4.5:1）。
- 推荐组合：
opacity: 0.45+color: #999+background-color: #f5f5f5+border-color: #ccc - 避免
opacity: 0.3或更低，尤其在浅色背景上，文字会彻底糊掉 - 别用
opacity配合filter: grayscale()—— iOS 12–14 有渲染延迟，高对比度模式下滤镜直接失效
如何让禁用按钮在触摸设备上真正“不可点”
光靠 disabled 属性和 CSS 不够。移动端触摸事件可能穿透，或因 300ms 延迟导致误触。
立即学习“前端免费学习笔记（深入）”；
- 纯触摸场景（无键盘导航需求）：加
pointer-events: none，但它会同时禁用focus和键盘导航，慎用 - 需保留 Tab 导航（如表单内）：改用
pointer-events: auto+touch-action: none+user-select: none - 监听
touchstart并event.preventDefault()是下策——容易干扰父容器滚动，只在极简弹窗按钮里临时补救
React/Vue 中动态控制最容易漏掉的同步点
框架里常通过 :disabled="isLoading" 或 disabled={isSubmitting} 控制状态，但样式更新可能滞后于 DOM 属性变更，尤其在异步操作后立即启用/禁用按钮时。
- 确保绑定的是布尔值：
disabled={isSubmitting}，而不是disabled={isSubmitting ? '' : null}（空字符串会被识别为存在属性，null则不会） - Vue 中若同时写了
v-bind:class="{ 'btn--disabled': isLoading }"，就重复了——class 控制样式，disabled控制语义和行为，两者不同步时，屏幕阅读器可能读错 - React 中始终用
<button disabled={isSubmitting}>，让框架透传disabled属性到 DOM，别绕过原生能力
真正难的不是写几行 CSS，而是让禁用状态在视觉、触摸、键盘、可访问性四层都一致生效——iOS Safari 的 :disabled 支持缺口，意味着你必须显式覆盖所有关键样式，且不能假设浏览器会帮你做继承或过渡。
