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

How can I use cursor: not-allowed on button or a? I tried the following:

.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 button or a is clickable. If the pointer-events: none the cursor doesn't change.

Please help me, I despair!

183010 次浏览
小开

Use this:

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

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

小开

This is actually a bug in 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;
}
小开

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.

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

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.

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

小开

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.

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




span {
cursor: not-allowed;
}
小开

Most of the time not allowed is not work together with the disabled property. is any one looking for disable with not allowed property here is code.

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

提交答案