设置所选复选框的颜色

Question

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success"><input type="checkbox"> Low  </label>
    <label class="btn btn-warning"><input type="checkbox"> Medium  </label>
    <label class="btn btn-danger"><input type="checkbox"> High </label>
</div>  
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"><input type="checkbox"> Open  </label>
    <label class="btn btn-secondary"><input type="checkbox"> Closed  </label>
</div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn label-info"><input type="checkbox"> Yes  </label> 
    <label class="btn btn-dark"><input type="checkbox"> No </label>
</div>

我的问题是关于如何在选中所有复选框时将其设置为相同。我试过了

.btn.active {
  background-color: limegreen;
}

但无济于事。

Answer 1

将所有复选框的颜色设置为活动状态比您最初预期的要多一些。这是因为您的自定义CSS的特性必须匹配或超过Bootstrap规则的特性。

您将在下面找到一个包含所需自定义css覆盖的工作代码段。而且你会注意到它只会改变按钮的颜色（按照你的要求），并且当按钮处于焦点时不会改变发光的颜色。

点击下面的“运行代码段”按钮进行测试：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<style>
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle {
    background-color: limegreen;
    border-color: limegreen;
}
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle {
    background-color: limegreen;
    border-color: limegreen;
}
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show>.btn-danger.dropdown-toggle {
    background-color: limegreen;
    border-color: limegreen;
}
</style>

<div class="btn-group btn-group-toggle m-3" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="checkbox" name="option1" id="option1" autocomplete="off" checked> Low
    </label>
    <label class="btn btn-warning">
        <input type="checkbox" name="option2" id="option2" autocomplete="off"> Medium
    </label>
    <label class="btn btn-danger">
        <input type="checkbox" name="option3" id="option3" autocomplete="off"> High
    </label>
</div>

Answer 2

请看这个demo bootply。在这里，您可以看到自定义引导复选框样式，例如，当单击复选框时，颜色不是默认的黑色，而是绿色。您可以根据自己的需要进行更改