如何在Bootstrap 4中修改禁用<button>或<a>元素的光标样式？

我太懂你遇到的这个矛盾了——Bootstrap 4里的.disabled类给<a>和按钮加了pointer-events: none，这直接让元素不响应任何指针操作，你写的cursor: not-allowed根本不会生效；可要是强行把pointer-events改成auto，光标样式倒是出来了，但元素又能被点击，完全违背了“禁用”的初衷。

别着急，这里有个完美的解决思路：用伪元素来分离“不可点击”和“光标样式”的需求。

自定义CSS样式 #

/* 给禁用元素保留pointer-events:none，确保它真的不可点击 */
.not-allowed {
  pointer-events: none;
  position: relative;
}

/* 用伪元素覆盖整个元素区域，专门负责显示禁用光标 */
.not-allowed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
  z-index: 1; /* 确保伪元素在元素上方，能接收到鼠标事件 */
}

实际使用示例 #

你的<a>标签直接保留.disabled和.not-allowed类就行：

<a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test</a>

补充：关于元素的小提示 #

如果是<button>元素，其实不用这么折腾——原生的disabled属性会自动让浏览器显示not-allowed光标，而且元素本身天然不可点击。要是你发现光标样式不对，大概率是自定义CSS覆盖了默认行为，只需要确保禁用按钮没被设置pointer-events: none就行：

button:disabled {
  cursor: not-allowed !important;
  /* 千万别加pointer-events:none，不然光标样式会失效 */
}

这样一来，既能保证元素真的禁用不可点击，又能正确显示禁用状态的光标啦！

内容的提问来源于stack exchange，提问作者PaT