Developer forum

Forum » Rapido » "disabled" class blocks button pointer events

"disabled" class blocks button pointer events

Mafalda Correa
Mafalda Correa


I noticed that when you make a button disabled, it doesn't only add the disabled attribute, but it also add a disabled class. I thought this would be to attribute the disabled CSS styles, but then I realised those are also being applied directly to the buttons with attribute disabled.

Furthermore, the disabled class has a pointer-events: none; rule which is unnecessary as the disable attribute already disables the button and makes the cursor style rule and title tooptip stop working.

See the video below:

How should I fix this issue? Should I remove the rule from the disabled class or should I stop the code from adding the disabled class to buttons?


Mafalda Correa
Mafalda Correa


Karsten Thuen Dynamicweb Employee
Karsten Thuen

Hi Mafalda

The disabled css class is there to have something standard that can make a "disabled" styling for most elements. It is there to separate styling from function. I think the fix would simply be to add "cursor: not-allowed", to the genral .disabled class. 

I am not sure we can simply remove the "pointer-events: none".

Are you looking at this due to the new Accesability requirements? 


Best regards
Karsten Thuen

Mafalda Correa
Mafalda Correa

Hi Karsten,

Sorry, I missed your reply in April and only revisited this now.

My previous post raised more questions, but the main thing is: the current code for the disabled class and attribute has contradicting styles.

.disabled, input[disabled] {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
  color: @gray-light;

Cursor styling will not work if pointer-events: none, so setting cursor: not-allowed becomes obsolete, as pointer-events:none is going to overwrite it. Using pointer-events: none will disable all mouse interactions with that element, including cursor styling.


Even not necessarily agreenig with the overall article, it does make a good point why using pointer-events:none for disabled fields doesn't really work.

As for Accessibility requirements, it shouldn't matter as this is impacting mouse interactions and generally speaking, accessibility concerns don't include mouse usage (don't quote me on this though, because I didn't check how screen readers behaved with it).

Hope that clears things up (even though the answer is much too late)



You must be logged in to post in the forum