如何更改 Bootstrap 禁用按钮的颜色？答案

【问题标题】：How to change color of Bootstrap disabled button?如何更改 Bootstrap 禁用按钮的颜色？
【发布时间】：2016-03-05 18:31:37
【问题描述】：

我在我的网站页面上使用引导按钮，我想更改禁用按钮的颜色。一个“灰显”且您无法单击的按钮。有没有办法可以使用 CSS 更改它的颜色？这有什么课吗？

非常感谢！

【问题讨论】：

标签： html css button

【解决方案1】：

如果您的按钮如下所示：

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

下一个 CSS 代码将改变其颜色（仅在禁用时）：

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

或

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

【讨论】：

【解决方案2】：

如果我正确理解您的问题；你需要使用:disabled。这是一个工作代码：

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

#work:disabled{
  background-color: red;
}

&lt;button id="work"disabled="true" type="submit"&gt;Button &lt;/button&gt;

【讨论】：

好吧，这是普通按钮：.col-boosting .btn-pay-rank { height: 65px; font-weight: bold; background: #e06b38; border: none; box-shadow: 0 7px 0 0 #c7511f; } 我试过了：.col-boosting .btn-pay-rank:disabled { height: 65px; background: #dd5a22; border: none; box-shadow: 0 7px 0 0 #dd5a22; } 但它似乎仍然不起作用
看来您找到了答案，如果您还需要帮助，请告诉我。

【解决方案3】：

我必须这样做，因为我在 javascript 中禁用了按钮。

 var button = document.querySelector("#button");
            button.disabled = 'disabled';
            button.setAttribute("style", "background-color: #799b48");

【讨论】：

嗯，我认为你没有有那样做样式部分。如果您通过 javascript 将 disabled 属性动态设置为“disabled”，css-':disabled'-样式仍然适用。它也适用于一开始就被禁用的按钮..