html - 设置选中复选框的颜色

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>