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

Question

我试图在引导程序 4 和 MBD 5 中的复选框按钮上获得自定义 colors。我已经设法更改了某些部件的颜色，但是当它切换时以及当我切换它一次并尝试将其关闭它不会变回按钮上的原色，直到我单击页面上的其他位置。 我的按钮代码如下。

<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 function 是因为每个复选框无论是否选中都会显示一个文本。

这是一个链接，您可以在其中看到我的问题https://www.codeply.com/p/41wATHNgm8 。 我希望您在 hover 切换时看到的深绿色不会像现在那样切换为蓝色，而当您解除切换时会返回浅绿色。

Answer 1

解决它！

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