css - 切换按钮的自定义颜色

Question

我创建了一组这样的切换按钮:

.bs-example {
  margin: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
        <input type="checkbox"> Option 1
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 2
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 3
      </label>
</div>

我想改变两种切换状态下按钮的颜色。例如，当一个按钮处于事件状态时，它会变成绿色，否则它会保持白色。

你能帮帮我吗？

Answer 1

你应该小心使用 !important标记这是为了帮助覆盖 bootstrapstyle。

您还可以通过在 Bootstrap css <link> 之后声明您的样式表来完成它

希望对你有帮助

.btn:active,
.active {
  color: black !important;
  background-color: green !important;
  border-color: green !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
        <input type="checkbox"> Option 1
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 2
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 3
      </label>
</div>