Bootstrap 3 - 如何使用切换更改“.active”按钮的颜色？答案

【问题标题】：Bootstrap 3 - how to change a color of of ".active" button with toggle?Bootstrap 3 - 如何使用切换更改“.active”按钮的颜色？
【发布时间】：2019-01-19 11:22:52
【问题描述】：

我正在使用以下代码来切换无线电输入：

<div class="btn-group">
  <a href="#price" class="btn btn-primary btn-xs active" data-toggle="tab">
    <input type="radio" name="price" id="price" value="1"> Price
  </a>
  <a href="#contact" class="btn btn-primary btn-xs active" data-toggle="tab">
    <input type="radio" name="contact" id="contact" value="0"> Contact
  </a>
</div>

当我点击 Contact 按钮时，.active 类将分配给 Contact 按钮。当我单击 Price 按钮时，该类将分配给 Price 按钮。

这很好用。但我想更改活动按钮的颜色 - 现在，两个按钮都是灰色的。但我想要.active 按钮蓝色（主要）和non-active 按钮灰色（默认）。

我该怎么做？我可以只使用 CSS 吗？

【问题讨论】：

您的代码似乎没有显示您想要的内容，一旦单击单选按钮就会被永久单击，并且它们的背景颜色都是蓝色的，无论如何都不会切换
你必须为它使用自定义的 html css
你试过 .btn:focus, .btn.focus 而不是 btn.active？

标签： css twitter-bootstrap button twitter-bootstrap-3

【解决方案1】：

尝试添加这个 css

.btn-group .btn.active {
    background-color: blue;
}

【讨论】：

只有背景颜色会改变 OP 要求更改按钮颜色
Op 明确表示“我想更改活动按钮的颜色”
好的，谢谢您的澄清。我仍然认为我没有错。

【解决方案2】：

这肯定会奏效：

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>
</html>

查看：https://jsfiddle.net/7yy68ec3/

【讨论】：

【解决方案3】：

添加此 CSS，

.btn-group .btn.btn-primary.active {
  background: blue;
}

.btn-group .btn.btn-primary {
  background: grey;
}

现在，两个按钮默认都是灰色的。

一旦按钮具有.active 类，它就会变成蓝色。

【讨论】：

【解决方案4】：

<div class="btn-group">
  <a href="#price" class="btn btn-primary btn-xs active" role="button" data-toggle="tab">
    <input type="radio" name="price" id="price" value="1"> Price
  </a>
  <a href="#contact" class="btn btn-default btn-xs disabled" role="button" data-toggle="tab">
    <input type="radio" name="contact" id="contact" value="0"> Contact
  </a>
</div>

【讨论】：