cursor: not-allowed isn't working on disabled buttons

[pedroleo]

Sorry for open another issue for a already closed subject, but I'm not pretty sure if it's a expected behavior.

At the newest bootstrap library, we can find this rule:

"
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
"

So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.

I have created two jsfiddles. The only diference between both, is that one has the bootstrap-min.css imported and the other don't.

We can see that when I don't import the bootstrap library, everything works fine and when I import, it doesn't work anymore.

jsfiddle with bootstrap imported: https://jsfiddle.net/3sq410wk/
jsfiddle without bootstap css: https://jsfiddle.net/f2t9ahqe/

[twbs-lmvtfy]

Hi @Ccriativo!

You appear to have posted a live example (https://fiddle.jshell.net/f2t9ahqe/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 32, column 78: Attribute text not allowed on element input at this point.
• line 33, column 89: Attribute text not allowed on element input at this point.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[twbs-lmvtfy]

Hi @Ccriativo!

You appear to have posted a live example (https://fiddle.jshell.net/3sq410wk/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 36, column 78: Attribute text not allowed on element input at this point.
• line 37, column 89: Attribute text not allowed on element input at this point.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[pedroleo]

Sorry about that... it was .Net addiction. =)

With bootstrap: https://jsfiddle.net/3sq410wk/1/
Without bootstrap: https://jsfiddle.net/f2t9ahqe/1/

[patrickhlauke]

Confirming that the cursor:not-allowed isn't showing correctly. It seems that the preceding pointer-events:none is to blame...once that is removed, the cursor changes correctly (however, we have pointer-events:none as a way to suppress pointer-based activation, in situations where .disabled has been used). /cc @cvrebert

[pedroleo]

Yes, the pointer-events it's breaking the consistency. It's not the case to remove the cursor:not-allowed then?

Some people are suprised that, in same form elements, we have different behaviors...

[cvrebert]

X-Ref: #15235

[dchacke]

For what it's worth, I ended up having to write this to make this work:

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

[aborchew]

Came across this thread and thought I'd post my workaround, which I know will not work in all scenarios. For my usage, the a tag was wrapped in an li, and the following allows the usage of both CSS rules at play.

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

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

In my brief testing, the pre-existing symptoms persist if the rules are swapped (pointer-events on the parent element).

[noum]

It may be useful to disable the pointer-events on .disabled only, and enable it on [disabled]:

.btn.disabled {
  pointer-events: none;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
}

[mschwenk]

@aborchew thanks, this worked for me.

[omaracrystal]

The way I solved it for a custom styled material button was to include the asterisk *

&.mat-button-toggle-disabled {
      cursor: not-allowed;
      color: $disabled-btn-color;

      * {
        cursor: not-allowed;
        color: $disabled-btn-color;
      }
    }

[usmanarain350]

.pointer-events-none {
    pointer-events: none;
}

.wrapper {
    cursor: not-allowed;
}

<div class="wrapper">
<button class="pointer-events-none">Some Text</button>
</div>

Reference:
#https://stackoverflow.com/questions/46665625/how-to-combine-cursor-not-allowed-and-pointer-events-none