26

I am using a bootstrap button on a page of my website and I want to change the color of a disabled button. A button that is "grayed out" and you cannot click. Is there a way I can change the color of this using CSS? Any class for this?

Thank you very much!

cdlane
  • 40,441
  • 5
  • 32
  • 81
Oliver Beck
  • 309
  • 1
  • 3
  • 7

3 Answers3

43

In case your button look like this:

<button class="btn btn-primary" disabled>Button</button>

the next CSS code will change its color (when disabled only):

.btn.btn-primary[disabled] {
    background-color: #00ff00;
}

or

.btn.btn-primary:disabled{
    background-color: #00ff00;
}
Jumpa
  • 878
  • 1
  • 8
  • 12
2

If I understand your question correctly; you need to use :disabled. Here is a working code:

#work {
  width: 200px;
  height: 50px;
  color: black;
}

#work:disabled{
  background-color: red;
}
<button id="work"disabled="true" type="submit">Button </button>
Graphicoding
  • 102
  • 11
  • 1
    Alright so this is the normal button: `.col-boosting .btn-pay-rank { height: 65px; font-weight: bold; background: #e06b38; border: none; box-shadow: 0 7px 0 0 #c7511f; }` I tried this: `.col-boosting .btn-pay-rank:disabled { height: 65px; background: #dd5a22; border: none; box-shadow: 0 7px 0 0 #dd5a22; }` But it seems to still not work – Oliver Beck Mar 05 '16 at 19:28
  • 1
    Looks like you found your answer, let me know if you still need help. – Graphicoding Mar 05 '16 at 19:39
2

I had to do this because I was disabling the button in javascript.

 var button = document.querySelector("#button");
            button.disabled = 'disabled';
            button.setAttribute("style", "background-color: #799b48");
jeffkenn
  • 201
  • 4
  • 16
  • Hmmn I think you don't *have* to do the style-part that way. If you set the disabled attribute dynamically to 'disabled' via javascript, the css-':disabled'-styling would still apply. And it would also work for buttons that are disabled to begin with.. – icyerasor Aug 24 '20 at 09:43