iOS Safari（尤其是12–14）不按标准渲染:disabled，常忽略opacity、background-color更新及cursor: not-allowed，且原生<button disabled>仍可能响应touchstart；需组合opacity:0.45、显式颜色、cursor:not-allowed和pointer-events:none，并确保语义、视觉、触摸与键盘四重同步。
button:disabled 在 iOS Safari 上为什么看起来“没反应”
不是你 CSS 写错了，是 iOS Safari（尤其是 12–14）压根不按标准渲染 :disabled。它可能跳过 opacity、忽略 background-color 更新，甚至不触发 cursor: not-allowed。更糟的是，原生 <button disabled> 在某些 WebView 中仍能响应 touchstart，导致误触或穿透到下层元素。
常见诱因包括：
- 全局重置了
button { opacity: 1; }，直接把禁用态“洗掉”了 - 用了
filter: grayscale(1)—— iOS 12–14 渲染延迟，高对比度模式下直接失效 - 只写
button:disabled { opacity: 0.3; }，文字在浅色背景上糊成一片，违反 WCAG 对比度 ≥ 4.5:1 的要求
真正生效的禁用样式组合（iOS + 安卓双兼容）
单靠 :disabled 不够，必须显式叠加四层控制：视觉降级 + 触摸屏蔽 + 键盘可访问 + 语义明确。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
button:disabled {
opacity: 0.45;
color: #999;
background-color: #f5f5f5;
border-color: #ccc;
cursor: not-allowed;
pointer-events: none;
}
关键点说明：
-
opacity: 0.45是实测平衡点：比 0.3 更易读，又比 0.6 更强传达“不可用” - 所有颜色值都写死（不依赖继承），避免安卓 WebView 渲染异常
-
pointer-events: none确保触摸不穿透，但注意它会同时禁用focus—— 若需 Tab 导航，改用touch-action: none; user-select: none;替代 - 务必移除禁用态的过渡动画：
transition: none;，否则状态切换时可能出现闪烁或残留动效
React/Vue 动态禁用时最容易漏掉的同步点
框架里常写 :disabled="isLoading" 或 disabled={isSubmitting}，但样式更新可能滞后于 DOM 属性变更，尤其在异步请求刚结束、按钮立刻启用的瞬间。
实操建议：
- 禁用逻辑触发后，手动调用
buttonRef.current?.blur()，清除 Safari 中残留的:focus样式 - 避免仅靠 class 切换模拟禁用（如
btn--disabled），除非你同时设置aria-disabled="true"和tabindex="-1" - 如果用了 Tailwind，确认
tailwind.config.js中已启用disabled变体（v3+ 需引入@tailwindcss/forms插件） - 测试时别只点按钮 —— 用键盘 Tab 进入、再 Shift+Tab 退出，观察焦点是否卡住、屏幕阅读器是否正确播报“已禁用”
非原生按钮（div/span）怎么办
:disabled 对 <div disabled> 或封装过的组件完全无效 —— 浏览器根本不识别这个属性，CSS 选择器也匹配不到。
必须改用类名驱动：
- HTML 改为
<button class="btn is-disabled">提交</button>（仍用<button>保证语义） - CSS 写
.is-disabled { filter: grayscale(1) contrast(0.8); pointer-events: none; }（filter此时才真正生效） - JS 中检查
el.classList.contains('is-disabled')而非el.disabled - 加上
aria-disabled="true"和tabindex="-1"，补全可访问性链路
最麻烦的不是样式写不出来，而是禁用状态在视觉、触摸、键盘、屏幕阅读器四个维度中任意一个脱节，用户就会困惑。iOS Safari 的 bug 不是边缘情况，是真实线上高频问题，得当默认环境来适配。
