如何在 Bootstrap 4 中更改禁用 <button> 或 <a> 的光标？答案

【问题标题】：How can I change cursor for disabled <button> or <a> in Bootstrap 4?如何在 Bootstrap 4 中更改禁用 <button> 或 <a> 的光标？
【发布时间】：2018-10-25 05:13:15
【问题描述】：

如何在按钮或 a 上使用 cursor: not-allowed >?我尝试了以下方法：

.not-allowed {
     pointer-events: auto! important;
     cursor: not-allowed! important;
}

我的按钮如下所示：

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

如果没有激活指针事件，光标就不能改变。但是如果pointer-events: auto，按钮或a 是可点击的。如果 pointer-events: none 光标没有改变。

请帮助我，我绝望了！

【问题讨论】：

可以使用pointer-events: auto !important;（感叹号前的空格）

标签： css bootstrap-4

【解决方案1】：

这实际上是 Bootstrap 中的bug

建议的解决方案：

button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

或者如果你有这种结构：

<li class="disabled">
  <a href="#">My Link</a>
</li>

然后

li.disabled {
  cursor: not-allowed;
}
li.disabled a {
  pointer-events: none;
}

【讨论】：

谢谢你，帮我省了些麻烦
很高兴它有帮助。
@stackingjasoncooper, some 拉头发是对的 - 实现是删除嵌套标签上的指针事件，这是完美的规定。多亏了这一点，我们的一些头发得以保留！
正在寻找类似的答案，得到了一个。赞一个！

【解决方案2】：

使用这个：

.not-allowed {
     cursor: not-allowed !important;
}

【讨论】：

【解决方案3】：

你可以像下面这样将你的按钮包裹在 span 中

<span>
   <button> click me </button>
</span>

现在在 css 中不允许按钮上的指针事件，并为包装器禁用光标。

 button {
     pointer-events: none;
     opacity: 0.7
   }


   span {
       cursor: not-allowed;
   }

【讨论】：

【解决方案4】：

使用onclick="return false;"

.not-allowed{
 cursor: not-allowed! important;
    
}

&lt;a class="btn btn-primary btn-lg disabled not-allowed" onclick="return false;" href="https://www.example.com" role="button"&gt;Test&lt;/a&gt;

【讨论】：

告诉我更多帮助

【解决方案5】：

您有多种选择，但并非所有选择都是平等的。

最好用 div 或 span 包装您的元素，并将光标设置在包装器上，并将指针事件设置在内容上。这样你就可以得到所有好处而不会弄乱 JS。

其次，您可以在按钮上使用属性disabled，这将使其无法工作。然后您可以将光标设置在禁用的元素上。

最后，但我不建议这样做，是使用 JS 来return false。尽管这可行，但我不喜欢它，因为：仍然会触发 click 事件（即仍然可以点击，但链接未通过），这意味着您在视觉上也认为您点击了按钮。

.disabled-wrapper {
  display: inline-block;
  cursor: not-allowed;
}

.disabled-wrapper a,
.disabled-wrapper button {
  pointer-events: none;
}

button[disabled] {
  cursor: not-allowed;
}

a.disabled.js-test,
button.disabled.js-test {
  cursor: not-allowed;
}

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

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

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

【讨论】：

非常感谢。使用包装器的解决方案效果很好！
@Pat 如果答案对您有帮助，请点击答案旁边的复选标记接受。谢谢。

【解决方案6】：

大多数时候不允许不与 disabled 属性一起使用。是否有人在此处寻找禁用不允许的属性的代码。

<style>
button
{
  cursor:not-allowed;
}
</style>
<button disabled>
  Click
</button>

【讨论】：