button:disabled 单独使用在 ios safari 12–14 上常失效，需四层组合：显式视觉降级（opacity、颜色等）、触摸屏蔽（pointer-events: none 或 touch-action: none）、键盘可访问（保留 focus）、语义明确（dom disabled 属性+aria）。
直接用 button:disabled 就能生效，但只写这一条大概率在 iOS Safari（尤其是 12–14）上失效，甚至按钮还能点、光标不变、文字糊成一片——不是你 CSS 写错了，是浏览器没按标准渲染。
为什么 button:disabled 在移动端经常“看起来没反应”
iOS Safari 对 :disabled 的支持有明显缺口：它可能跳过 opacity、忽略 background-color 更新、不触发 cursor: not-allowed；更糟的是，原生 <button disabled></button> 在某些 WebView 中仍响应 touchstart，导致误触或穿透到下层元素。
- 全局重置了
button { opacity: 1; }，直接把禁用态“洗掉”了 - 用了
filter: grayscale(1)—— iOS 12–14 渲染延迟，高对比度模式下直接失效 - 只写
button:disabled { opacity: 0.3; }，浅色背景上文字对比度低于 WCAG 4.5:1 要求，实际不可读 - JS 动态设置
el.disabled = true是有效的，但el.setAttribute('disabled', '')在旧版安卓上可能不触发行为
真正生效的四层组合写法（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 属性变更，尤其在异步请求刚结束、按钮立刻启用的瞬间。
- 确保 JS 设置
el.disabled = true后，DOM 上真实存在disabled属性（React 中disabled={false}不会移除属性，需条件渲染或显式删除） - 测试时打开 DevTools，手动删掉
disabled属性，看样式是否同步消失，验证是否真由该伪类控制 - 禁用态不只是视觉：DOM 层设
disabled属性、CSS 层用:disabled控制、行为层在 handler 开头加if (el.disabled) return;拦截事件
最常被忽略的其实是可访问性同步：屏幕阅读器读出“按钮可用”，但实际点不动；或者用户用键盘 Tab 到按钮，却因 pointer-events: none 失去焦点反馈——这些都不是样式问题，而是四层控制中某一层断开了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
