Question

**BODY**:  

```JSON
{
  "username": "example@example.com",
  "p2setting": "4xx72"
}
```

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

<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>

但无济于事。

Answer 1

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

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

点击＆＃34;运行代码段＆＃34;下面的按钮来测试这个：

＆＃13;

<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>

＆＃13;

Answer 2

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

设置所选复选框的颜色

2 个答案: