应使用 JavaScript 添加自定义类（如 is-loading）并配合 CSS 设置 cursor: wait，而非依赖 button:disabled；因 :disabled 在多数浏览器中会忽略 cursor 样式，且语义上仅防重复提交，不传达加载状态。
按钮禁用时如何让光标变成 wait
直接给 :disabled 加 cursor: wait 是无效的——浏览器对禁用表单控件的样式限制很死，cursor 在大多数浏览器里会被忽略，尤其是 Chrome 和 Edge。
真正可靠的做法是换一个可样式化的状态：用 JavaScript 控制一个自定义类，比如 is-loading，然后在 CSS 里针对它设置光标和视觉反馈。
- 不要依赖
button:disabled { cursor: wait }，它在实际点击提交后大概率不生效 - 禁用按钮的同时，立即添加
is-loading类（顺序很重要：先加类，再设disabled） - CSS 中用
button.is-loading而不是button:disabled来控制光标和背景色
为什么不能只靠 :disabled 控制加载态样式
:disabled 是个“语义锁”，它让元素脱离交互流，也顺带剥离了部分样式响应能力。比如 Safari 会完全忽略 :disabled 上的 cursor，Firefox 虽然支持，但仅限于未聚焦状态；一旦按钮获得焦点（比如回车触发），光标又可能变回 default。
更麻烦的是，有些 UI 库（如 Bootstrap、Tailwind 的某些版本）会给 :disabled 强制覆盖 cursor: not-allowed，你写的 wait 就被干掉了。
立即学习“前端免费学习笔记（深入）”；
- 禁用状态 ≠ 加载状态：用户点下按钮到接口返回之间，按钮应该“看起来在忙”，而不是“看起来被锁了”
-
:disabled主要防重复提交，is-loading才负责传达状态，二者职责不同，该分开管 - 如果服务响应快（比如
button.is-loading 的最小可行 CSS 写法
不需要复杂动画，几行就够了。重点是覆盖掉所有可能干扰的默认行为。
button.is-loading {
cursor: wait;
pointer-events: none;
}
button.is-loading:not(:disabled) {
opacity: 0.8;
}
这里用了 pointer-events: none 替代 disabled 的一部分作用（防止二次点击），同时保留 cursor 可控性；而 :not(:disabled) 是为了在 JS 还没来得及设 disabled 属性的瞬间，也能有灰度反馈。
- 别忘了在 JS 里同步操作：
btn.classList.add('is-loading'); btn.disabled = true; - 恢复时顺序反过来：
btn.disabled = false; btn.classList.remove('is-loading'); - 如果按钮本身有
:hover样式，记得在.is-loading下显式重置，否则悬停效果可能残留
React/Vue 场景下容易漏的细节
框架里常有人写 disabled={isLoading} 然后以为光标会自动变，结果发现没反应——因为框架绑定的 disabled 属性不会触发你写的 :disabled 光标规则。
根本问题还是样式锚点错了。得把类名也交给框架控制：
- React：用
className={\`btn \${isLoading ? 'is-loading' : ''}\`}，再配合disabled={isLoading} - Vue：用
:class="{ 'is-loading': isLoading }"和:disabled="isLoading" - 千万别只靠属性绑定，漏掉 class 控制——那是最常见的一次性失效原因
加载态不是开关，是状态流：类名进、disabled 进、文字变、光标变，四个动作最好在同一个 tick 完成，不然会有闪动或错位。
