How can I change cursor for disabled

Question

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!

Maybe use `pointer-events: auto !important;` (space before the exclamation mark) — Lorenz Merdian, May 15 '18 at 11:35

score 152 · Answer 1 · answered May 15 '18 at 11:38

152

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;
}

answered May 15 '18 at 11:38

Mohamed Ramrami

12,026
4
33
49

@stackingjasoncooper, *some* hair pulling is right - the realisation is removing pointer events on the nested a tag, which this prescribes perfectly. Thanks to this some of our hair is retained! – Joel Balmer Jun 11 '19 at 10:51

score 42 · Answer 2 · edited May 15 '18 at 13:33

42

Use this:

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

edited May 15 '18 at 13:33

Jesse

3,522
6
25
40

answered May 15 '18 at 11:31

renuka

698
4
8

score 14 · Answer 3 · answered Oct 05 '19 at 10:58

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;
   }

score 6 · Answer 4 · answered May 15 '18 at 11:35

6

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>

answered May 15 '18 at 11:35

לבני מלכה

15,925
2
23
47

score 5 · Answer 5 · answered May 15 '18 at 11:44

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>

score 4 · Answer 6 · answered Dec 14 '21 at 13:02

4

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>

answered Dec 14 '21 at 13:02

Honnappa

51
2

score 0 · Answer 7 · answered May 13 '23 at 17:41

0

Simply

  <button  class='btn-reserve' type='submit' disabled="true">Submit</button>

  .btn-reserve:disabled {
      cursor: not-allowed;
    }

answered May 13 '23 at 17:41

Shah Fahad

61
3

How can I change cursor for disabled or in Bootstrap 4?

7 Answers7

How can I change cursor for disabled