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

Code Help HTML/CSS/JS
1

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

2

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");
1 Like
3

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

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

Thank you this will help me

1 Like
5

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

6

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

1 Like