禁用按钮的 cursor 样式常失效是因为浏览器对 disabled 状态有强制样式覆盖，需用 button:disabled { cursor: not-allowed !important; pointer-events: auto; } 并区分原生属性、框架 class 或 ARIA 属性来针对性处理。

禁用按钮的 cursor 样式为什么经常失效？

因为浏览器对 disabled 状态的原生按钮有强制样式覆盖，直接在 CSS 里写 cursor: not-allowed 很可能被忽略。尤其在 Chrome 和 Edge 中，button:disabled 的默认 cursor 并不总是生效，取决于是否用了 pointer-events: none 或父级干扰。

用 :disabled 伪类 + 显式设置 cursor

最稳妥的做法是显式声明，并提高选择器权重：

button:disabled {
  cursor: not-allowed !important;
  pointer-events: auto; /* 关键：否则鼠标事件完全被拦截，光标也不显示 */
}

• 必须加 pointer-events: auto，否则即使设置了 cursor，鼠标也“穿”过按钮，根本触发不了光标变化
• 避免只写 button[disabled] —— 它匹配的是属性存在，而 :disabled 匹配的是真实禁用状态（比如 JS 动态设置 disabled = true 后仍有效）
• 如果按钮是内联元素或被 display: flex 父容器影响，检查是否意外继承了 cursor: default

React/Vue 等框架中按钮禁用时的常见陷阱

框架组件（如 Ant Design、Element Plus）常把 disabled 渲染为 class（如 ant-btn-disabled），而非原生 disabled 属性，此时 :disabled 伪类完全不生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 优先查文档看组件是否暴露禁用类名，然后针对性覆盖：.my-btn-disabled { cursor: not-allowed; pointer-events: auto; }
• 不要依赖 button[disabled] 去匹配第三方组件，它们往往用 aria-disabled="true" 或 class 控制状态
• 若用 useState 控制 disabled，确保 DOM 更新后样式能同步 —— 有时 React 的重渲染延迟会导致光标滞后一帧

移动端 Safari 的特殊处理

iOS Safari 对禁用按钮的 cursor 完全无视（毕竟没鼠标），但会响应 touchstart，导致用户误以为可点击。这时光标样式不是重点，真正要防的是误触。

立即学习“前端免费学习笔记（深入）”；

• 禁用状态下加 touch-action: none，阻止触摸反馈
• 配合视觉降级：降低透明度 + 移除 box-shadow，比改光标更能传达“不可操作”
• 如果必须保留点击反馈（比如为了统一交互逻辑），用 pointer-events: none，但注意这会让 cursor 彻底失效 —— 此时不如放弃光标，专注状态可见性

禁用按钮的光标问题本质是浏览器渲染层和交互层的错位，解决它不能只靠 CSS，得先确认禁用机制是原生属性、框架 class 还是 ARIA 属性，再选对应策略。很多人卡在第一步就错了。