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

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:

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 => = "not-allowed");
1 Like

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

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

Thank you this will help me

1 Like

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

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

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.