样式 Bootstrap 4 自定义复选框

Question

如何在 Bootstrap 4 中设置自定义复选框的样式？我什么都试过了，但我什至不能改变它的背景颜色。

这是我的代码大纲：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

我的目标是什么？有人可以告诉我如何改变它的背景吗？

谢谢你。

原文由 hemoglobin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 .custom-control{
  background-color: grey;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

原文由 Malathy Venkatesan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

它对我有用

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}

原文由 manuxi 发布，翻译遵循 CC BY-SA 4.0 许可协议