How can I make a disabled button have the not allowed cursor?

[QwertyQwerty88]

Question:
How can I make a disabled button have the not-allowed cursor? I tried using button:disabled but it didn’t seem to work.

Code snippet:

button:disabled {
  cursor: not-allowed;
}

Repl link:
https://replit.com/@RotoBit-Studios/RotoBit-Studios

[QwertyQwerty88]

OK so I tried it in the W3Schools editor and it seemed to work fine, I think the problem is cause I’m using replit.css by hecker40.

Edit: I just used the style attribute to change the cursor (don’t bulli me trash at js):

const disabledButtons = document.querySelectorAll('button:disabled');

disabledButtons.forEach(button => button.style.cursor = "not-allowed");

[PikachuB2005]

Instead of using js, have you tried adding !important?

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

[arhanansari2009]

Thank you this will help me

[QwertyQwerty88]

Thanks, that worked. But I thought using !important was considered bad practice?

[PikachuB2005]

It probably is, I just think it’s better to have your css all together