Question

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

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

这是我的代码：

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

Answer 1

您需要做的是打开引导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>

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

1 个答案: