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

How can I change cursor for disabled <button> or <a> in Bootstrap 4?

提问by PaT

How can I use cursor: not-allowedon buttonor a? I tried the following:

如何使用cursor: not-allowedon button或a？我尝试了以下方法：

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

My button looks like this:

我的按钮看起来像这样：

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

Without the pointer-events is activated, the cursor can not be changed. But if pointer-events: auto, the buttonor ais clickable. If the pointer-events: nonethe cursor doesn't change.

如果不激活指针事件，则无法更改光标。但是如果pointer-events: auto，按钮或a是可点击的。如果pointer-events: none光标不会改变。

Please help me, I despair!

请帮帮我，我绝望了！

回答by Mohamed Ramrami

This is actually a bugin Bootstrap

这实际上是Bootstrap 中的一个错误

The proposed solutions :

建议的解决方案：

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

or if you have this kind of structure :

或者如果你有这种结构：

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

then

然后

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

回答by renuka

Use this:

用这个：

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

回答by ???? ????

useonclick="return false;"

用onclick="return false;"

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

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

回答by Bram Vanroy

You have a number of options, but not all of them are equal.

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

Preferably, wrap your element with a div or span and set the cursor on the wrapper and pointer-events on the content. This way you get all benefits without messing with JS.

最好用 div 或 span 包裹您的元素，并将光标设置在包装器上，并将指针事件设置在内容上。通过这种方式，您可以获得所有好处而不会弄乱 JS。

Second, you can use the attribute disabledon a button, which will make it so that it does not work. You can thenset the cursor on the disabled element.

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

Lastly, but I don't advise it, is using JS to return false. Even though this works, I don't like it because: the click event is still triggered (i.e. clicking is still possible but the link is not followed through), meaning you also visually think you clicked the button.

最后，但我不建议这样做，使用 JS 到return false. 尽管这有效，但我不喜欢它，因为：仍然会触发单击事件（即仍然可以单击，但不会跟踪链接），这意味着您在视觉上也认为您单击了按钮。

.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>

回答by Santosh Kadam

You can wrap your button in span like below

你可以像下面这样用跨度包裹你的按钮

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

Now in css don't allow pointer events on button and make cursor disabled for wrapper.

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

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


   span {
       cursor: not-allowed;
   }