移动端按钮的:disabled伪类不生效因iOS Safari等浏览器支持不全，需结合pointer-events: none、显式class控制、禁用态样式写死及避免滤镜等方案确保视觉、触摸、键盘和可访问性四重保障。
disabled伪类在移动端按钮上为什么不生效
因为很多移动端浏览器（尤其是iOS Safari）对 :disabled 伪类的样式支持不完整，特别是当按钮是 <button> 且未显式设置 pointer-events: none 时，禁用状态可能看起来“没反应”——点击仍触发、颜色没变、甚至还能聚焦。
- 原生
<button disabled>在iOS上常忽略:disabled { opacity: 0.5; }等CSS，需配合opacity+pointer-events: none双保险 - 如果按钮是用
<div>或<a>模拟的，:disabled根本不匹配（它们没有disabled属性），必须靠 class 控制，比如.btn--disabled - 部分安卓WebView对
:disabled的继承样式（如color）渲染异常，建议所有禁用态样式都写死，不要依赖父级继承
滤镜（filter）让禁用按钮变灰的兼容性陷阱
filter: grayscale(1) brightness(0.8) 看起来很直观，但 iOS 12–14 的 Safari 对 filter 在 disabled 元素上的应用有延迟或跳变；更关键的是，滤镜会干扰可访问性：屏幕阅读器可能无法正确识别禁用状态，且高对比度模式下滤镜会被覆盖或失效。
- 优先用
opacity: 0.45+color: #999+background-color: #f5f5f5组合，比滤镜更稳、更语义化 - 如果真要用
filter，务必加transition: filter 0.15s ease，否则在快速启停时会出现闪烁 - 避免
filter: blur()或drop-shadow()，这些在低端安卓机上会显著掉帧，尤其在滚动中点击按钮时
如何让disabled按钮在触摸设备上真正“不可点”
光靠 disabled 属性和CSS不够。移动端触摸事件（touchstart）可能穿透到禁用按钮下的元素，或者因300ms延迟导致误触。
- 给禁用按钮加
pointer-events: none（注意：它会同时禁用所有交互，包括 focus 和键盘导航，所以仅用于纯触摸场景） - 若需保留键盘可访问性（如表单内Tab导航），改用
pointer-events: auto+touch-action: none+user-select: none - 监听
touchstart并event.preventDefault()是下策——容易干扰父容器滚动，只在极简场景下临时补救
React/Vue里动态控制disabled样式容易漏掉的点
框架里常通过 :disabled="isLoading" 或 disabled={isSubmitting} 控制状态，但样式更新可能滞后于DOM属性变更，尤其在异步操作后立即启用/禁用按钮时。
立即学习“前端免费学习笔记（深入）”；
- Vue中用
v-bind:class="{ 'btn--disabled': isDisabled }"比直接绑定disabled更可控，能确保class与样式同步 - React中避免直接
disabled={isSubmitting || !isValid}后只靠:disabled伪类——建议额外加className={isSubmitting ? 'btn--disabled' : ''} - 禁用后立刻调用
button.blur()，防止焦点卡在已禁用按钮上（iOS Safari特别容易卡住）
最麻烦的不是怎么写样式，而是禁用状态要同时满足视觉反馈、触摸拦截、键盘可访问、屏幕阅读器识别这四件事。少一个，用户就可能点错、等不到反馈、或根本不知道按钮已被禁用。
