复选框按钮引导程序上的自定义颜色

Question

我正在尝试在 bootstrap 4 和 MBD 5 中的复选框按钮上获取自定义颜色。我已经设法更改了某些部分的颜色，但在切换和切换一次时无法更改颜色并尝试将其关闭，直到我单击页面上的其他位置，它才会变回按钮上的原色。我的按钮代码如下。

<div class="form-group">
  <h2>Heading</h2>                
    <div class="btn-group-toggle" data-toggle="buttons">
      <input type="checkbox" class="btn-check" id="risk1" autocomplete="off" onclick="myFunction(this.id)">
      <label class="btn btn-primary col" for="risk1">Checkbox 1</label>
    </div>

    <div class="btn-group-toggle" data-toggle="buttons">
      <input type="checkbox" class="btn-check" id="risk2" autocomplete="off" onclick="myFunction(this.id)">
      <label class="btn btn-primary col" for="risk2">Checkbox 2</label>
    </div>
</div>

我在 CSS 中用于更改按钮颜色的代码如下。

.btn-primary{color:#fff;background-color:#007b4e;border-color:#007b4e}
.btn-primary:hover{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,
.btn-primary:disabled{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

onclick 功能是因为每个复选框无论是否选中都会显示一个文本。

这是一个链接，您可以在其中查看我的问题https://www.codeply.com/p/41wATHNgm8。我希望您在悬停时看到的深绿色在切换时保持不变，而不是像现在这样的蓝色，而在您取消切换时返回浅绿色。

Answer 1

修好了！

在 css 文件中添加了input[type=checkbox]:checked + label{ background-color: #08402b; }，并从 btn-primary 更改为 btn-custom。