禁用按钮的 cursor 默认 not-allowed 常不生效，因原生 disabled 属性强制禁用 pointer-events，使 CSS cursor 被浏览器忽略；应改用 .disabled 类 + pointer-events: none + cursor 显式声明并确保样式权重足够。
禁用按钮的 cursor 默认是 not-allowed，但可能不生效？
bootstrap 默认会给 .disabled 按钮或带 disabled 属性的 <button> 设置 cursor: not-allowed，但实际中常发现鼠标还是箭头——根本原因是：原生 disabled 属性会强制禁用 pointer events，css 的 cursor 在多数浏览器里被忽略（尤其 chrome/firefox 对原生 disabled 元素的 cursor 有策略性压制）。
实操建议：
- 别依赖原生
disabled属性来控制光标样式，它不可靠 - 改用 CSS 类（如
.disabled）+ 手动加pointer-events: none+ 显式声明cursor - 确保你的自定义样式权重 ≥ Bootstrap 默认样式（比如加
!important或提高选择器 specificity）
怎么用 CSS 强制改禁用按钮的 cursor？
最稳妥的方式是绕过原生 disabled，用类名控制状态，并在 CSS 中统一接管样式。例如：
.btn.disabled {
pointer-events: none;
cursor: default !important; /* 或 wait / not-allowed / help */
}注意点：
-
pointer-events: none是关键，它让元素真正“不可点”，同时释放对cursor的限制 -
!important很常见——因为 Bootstrap 的.btn:disabled规则优先级高，直接覆盖更省事 - 不要只写
cursor: not-allowed却漏掉pointer-events，否则在 Safari 或旧版 Edge 可能仍显示箭头
Angular/React 等框架里动态禁用按钮时怎么处理？
框架绑定 [disabled] 或 disabled={true} 会直接写入原生属性，导致上面说的 cursor 失效问题。必须把逻辑从“属性绑定”转为“类名绑定”。
示例（Angular）：
<button class="btn btn-primary"
[class.disabled]="user == null"
(click)="login()">Login</button>对应 CSS 保持上一节的 .btn.disabled 规则即可。React/Vue 同理，用 className 或 disabled 属性。
常见错误：
- 一边用
[disabled]="..."，一边又想靠 CSS 改 cursor → 白忙活 - 忘了移除原生
disabled属性，导致按钮既不可点、又无法触发 click 事件（哪怕你写了 handler）
为什么 readonly 对 button 没用？
readonly 属性**不适用于 <button> 元素**，HTML 规范里它只对 <input> 和 <textarea> 有效。给 button 加 readonly 不仅无效，还可能引发校验警告或意外行为。
所以：
- 禁用按钮，只用
disabled属性（配合类名方案）或.disabled类 - 别试
readonly，它不会让 button 变灰，也不会影响 cursor - 如果真需要“视觉禁用但保留交互”，那不属于“禁用”范畴，该用别的状态管理（比如
.is-pending）
浏览器对原生 disabled 元素的 cursor 渲染差异比想象中大，尤其在跨平台测试时容易漏掉；用类名 + pointer-events 是目前最可控、兼容性最好的路径。
