在Bootstrap 5（Angular 12环境）中如何修改选中复选框的背景色？

你遇到的问题核心是Bootstrap 5已经弃用了Bootstrap 4中的custom-control、custom-checkbox类，同时默认复选框的样式目标元素也和你写的不一致，所以原有CSS无法生效。下面是正确的实现方案：

一、默认复选框样式修改 #

Bootstrap 5中，复选框的背景色、阴影等样式直接作用在.form-check-input元素上，不需要通过label的伪元素控制：

/* 默认复选框 - 选中状态背景色 */
.form-check-input:checked {
  background-color: green !important;
  border-color: green !important;
}

/* 选中状态聚焦时的阴影 */
.form-check-input:checked:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25);
}

/* 未选中时聚焦阴影 */
.form-check-input:focus {
  box-shadow: 0 0 0 1px rgb(31, 161, 175), 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

/* 点击激活时的背景色 */
.form-check-input:active {
  background-color: #e112cc;
}

对应的HTML结构保持默认即可：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
</div>

二、自定义风格复选框（Bootstrap 5方式） #

如果需要更个性化的复选框，直接基于form-check扩展即可，无需使用旧的custom-control类：

/* 自定义复选框 - 默认状态背景色 */
.form-check-input.custom-checkbox {
  background-color: red;
  border-color: red;
}

/* 自定义复选框 - 选中状态背景色 */
.form-check-input.custom-checkbox:checked {
  background-color: black !important;
  border-color: black !important;
}

/* 自定义复选框 - 选中时的对勾图标（替换默认白色） */
.form-check-input.custom-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

/* 自定义复选框 - 激活时背景色 */
.form-check-input.custom-checkbox:active {
  background-color: green;
}

/* 自定义复选框 - 聚焦阴影 */
.form-check-input.custom-checkbox:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 0, 247, 0.25);
}

对应的HTML结构修改为：

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

关键说明 #

• Bootstrap 5彻底重构了表单组件，移除了所有custom-*前缀的类，统一使用form-check体系，这是你原有代码失效的核心原因。
• 若需要强制覆盖Bootstrap默认样式，!important可确保样式优先级更高；如果通过添加自定义类实现更精确的选择器，也可以不用!important。

内容的提问来源于stack exchange，提问作者manoj sahni