CODEWITHSUNDEEP
htmlcssbutton
Oliver Beck
Oliver Beck

Reputation: 319

How to change color of Bootstrap disabled button?

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!

Upvotes: 27

Views: 49341

Answers (3)

jeffkenn
jeffkenn

Reputation: 201

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");

Upvotes: 2

Jumpa
Jumpa

Reputation: 918

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;
}

Upvotes: 47

Graphicoding
Graphicoding

Reputation: 102

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>

Upvotes: 2

Related Questions