如何更改 Bootstrap 复选框的颜色？

Question

我有以下 HTML 代码：

 <div class="container">
  <form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p>
   </form>
 </div>

结果是：

将这种颜色更改为给定颜色的最简单方法是什么，例如 D7B1D7？

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

Answer 1

我已经为您的示例改编了此 CodePen 中的 .squaredThree 类。如果你想看一个活生生的例子，我的答案底部有一个 Fiddle 链接。

这是更新后的 CSS：

 /* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

我已更新您的 HTML 以包含另一个 label ，因为原来的 label 用作伪复选框。这是您更新后的 HTML：

 <div class="container">
  <form name="queryForm" class="form-inline">
    <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
      <label for="checkOther"></label>
    </div>
    <label class="label-text">Other</label>
  </form>
</div>

请注意，额外的 label 存在于 .squaredThree div 之外。 label 有一个类 .label-text 因为需要一些额外的样式规则来将文本稍微移动到 checkbox 的右侧：

 .label-text {
  position: relative;
  left: 10px;
}

最后， checkbox 中的检查大小不太正确，因此需要附加规则来纠正：

 *,
::before,
::after {
  box-sizing: initial;
}

Fiddle Demo 展示了上述内容。

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

Answer 2

如果您使用引导程序并且需要更改复选框颜色背景，只需覆盖此样式：

 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: green!important;
}

.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
  background-color: #C8FFC8;
}

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <div class="myTest custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>

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