Bootstrap 4：如何更改复选框的颜色？简单的方法

Question

<div class="modal-footer">
    <label class="checkbox-inline pull-left" for="rme"><input type="checkbox" class="custom-checkbox checkbox-primary" id="rme"> Remember me</label>
    <input type="submit" class="btn btn-success pull-right" value="Login">
</div>

如何修改相同的代码使复选框背景颜色为绿色

Answer 1

您已经在使用 Bootstrap 的“自定义”表单控件（尽管有点不正确——自定义 Bootstrap 4 控件的标记与您的示例不同）。

这是 Bootstrap 4 中自定义复选框的正确标记：

<div class="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>

自定义外观由custom-*CSS 类管理。如您所见，默认颜色是 Bootstrap 的主要“蓝色”颜色。要使其变为绿色，您必须覆盖或添加您自己的自定义 CSS 类。这是一个使用新类的示例，因此如果您有时仍想使用默认的蓝色，则可以。

<div class="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>

.custom-control-input-green:focus~.custom-control-label::before {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.custom-control-input-green:checked~.custom-control-label::before {
  border-color: #28a745 !important;
  background-color: #28a745 !important;
}

.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {
  border-color: #5bd778 !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: #d6f5dd !important;
  border-color: #d6f5dd !important;
}