iOS Safari对:disabled支持不全，需同时设置pointer-events:none、显式禁用色系、cursor:not-allowed，并确保JS用el.disabled=true而非setAttribute，且框架中disabled必须为布尔值。
移动端按钮加了 disabled 属性，但样式没变、还能点、甚至焦点乱跳——这不是你 CSS 写错了，是浏览器（尤其是 iOS Safari）压根没按标准渲染 :disabled。
为什么 :disabled 在 iOS 上经常不生效
iOS Safari（特别是 12–14 版本）对 :disabled 的样式支持有明显缺口：它可能忽略 opacity、跳过 background-color 更新，甚至不触发 cursor: not-allowed。更麻烦的是，原生 <button disabled></button> 在某些 WebView 中仍能响应 touchstart，导致误触或穿透到下层元素。
- 别依赖 UA 默认样式——很多项目重置了
button { opacity: 1; }，直接把禁用态“洗掉”了 -
:disabled只匹配真实存在的 HTMLdisabled属性，JS 设置el.disabled = true是有效的，但el.setAttribute('disabled', '')在旧版安卓上可能不触发行为 - 用
div或span模拟按钮？:disabled根本不匹配，必须靠 class 控制
真正能落地的禁用样式写法
不要只写 button:disabled { opacity: 0.5; }。iOS 下它大概率失效，且可访问性差。应该显式覆盖所有关键视觉属性：
- 固定禁用色系：
background-color: #e0e0e0;+color: #999;+border-color: #ccc; - 必须加
cursor: not-allowed;，这是最轻量、最通用的交互提示 - 如果要用
opacity，控制在0.45–0.6区间，并确保文字仍可读（别和背景对比度低于 4.5:1） - 避免
filter: grayscale()——iOS 12–14 有渲染延迟，高对比度模式下直接失效
移动端真·不可点，光靠 disabled 不够
即使 DOM 属性正确、CSS 也生效，触摸事件仍可能穿透或误触发。需要组合防御：
立即学习“前端免费学习笔记（深入）”；
- 纯触摸场景（无键盘导航需求）：加
pointer-events: none;，但它会同时禁用 focus，慎用 - 需保留 Tab 导航：改用
touch-action: none;+user-select: none;，再配合cursor: not-allowed - 监听
touchstart并event.preventDefault()是下策——容易干扰父容器滚动，只在极简弹窗按钮里临时补救 - React/Vue 中，确保绑定的是布尔值：
disabled={isSubmitting}，而不是disabled={isSubmitting ? '' : null}（空字符串会被识别为存在属性，null 则不会）
框架里最容易漏掉的状态同步点
Vue 用 :disabled="isLoading" 是对的，但如果你同时写了 v-bind:class="{ 'btn--disabled': isLoading }"，就重复了——class 控制样式，disabled 控制语义和行为，两者不同步时，屏幕阅读器可能读出“按钮可用”，但实际点不动。
- React 中，
disabled必须透传到真实 DOM，别用className模拟禁用态 - 异步操作中，禁用时机很关键：应在点击瞬间设
disabled=true，而不是等请求返回后才设，否则用户可能连点两次 - 禁用态过渡动画要小心：
transition: opacity 0.15s ease;可以，但transition: filter ...在低端安卓机上会掉帧
真正难的不是怎么写 :disabled，而是让「禁用」这件事从 DOM 属性、CSS 样式、触摸行为、键盘导航、屏幕阅读器五个层面全部对齐。少一个，用户就会困惑。
