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

Question

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

htmlcssbutton

27

我正在网站的一个页面上使用Bootstrap按钮，我想改变禁用按钮的颜色。禁用的按钮是“灰色的”，不能点击。是否有一种方法可以使用CSS更改禁用按钮的颜色？是否有相应的类名？

非常感谢！

- Oliver Beck

3个回答

2

我不得不这样做，因为我在JavaScript中禁用了该按钮。

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

- jeffkenn

嗯，我认为你不必以那种方式完成样式部分。如果你通过JavaScript动态地将disabled属性设置为“disabled”，则CSS的“：disabled”样式仍然适用。而且它也适用于一开始就被禁用的按钮。 - icyerasor

2

如果我理解你的问题正确，你需要使用:disabled。以下是一个可用的代码：

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

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

<button id="work"disabled="true" type="submit">Button </button>

- Graphicoding

1

好的，这是普通按钮的样式：

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

但似乎仍然不起作用。 - Oliver Beck

1

看起来你已经找到了答案，如果你还需要帮助，请告诉我。 - Graphicoding

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jumpa · Accepted Answer

如果您的按钮看起来像这样：

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

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

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

或者

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