如何更改 Bootstrap 自定义复选框的活动状态的背景颜色？

Question

Bootstrap 4 自定义表单文档

如果您检查自定义复选框并单击“活动”元素状态，您会注意到复选框中出现蓝色背景。这也可以通过在自定义复选框内按住鼠标而不释放来重现。

我正在尝试使用:active选择器删除蓝色背景/阴影，但它没有应用样式。

这是我的代码：

.custom-control-input:active {
  background-color: none !important;
  box-shadow: none !important
} 

Answer 1

您需要做的是打开 bootstrap CSS 并找到您需要覆盖的确切类。这里有一个自定义颜色的例子。

注意： !important仅在此代码段中需要这里，否则它在 Stackoverflow 上不起作用。您不需要在您的项目中使用它。

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: red !important;
  background-color: red !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(255,0,0,.25) !important;
}

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

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

.custom-control-input:disabled ~ .custom-control-label {
  color: blue !important;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: pink !important;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: red !important;
  background-color: red !important;
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5) !important;
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5) !important;
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

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