如何修改b-form-checkbox-group渲染的复选框选中时的默认蓝色背景色

解决方法 #

你可以通过自定义CSS覆盖默认样式实现效果，之前写的样式不生效大多是因为样式权重不足，或者vue单文件组件使用了scoped样式没有加深度选择器导致的，对应方案如下：

1. 非scoped样式方案

直接在全局样式或者非scoped的style标签中添加以下代码：

/* 修改选中状态背景色、边框色 */
#checkboxId .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #28a745; /* 替换为你想要的颜色值 */
  border-color: #28a745;
}

/* 可选：修改选中状态对勾的颜色 */
#checkboxId .custom-control-input:checked ~ .custom-control-label::after {
  filter: brightness(0) invert(1);
}

2. scoped样式方案

如果你的样式写在带scoped属性的style标签中，需要添加深度选择器穿透样式隔离：

• Vue2版本使用::v-deep或者/deep/：

<style scoped>
::v-deep #checkboxId .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #28a745;
  border-color: #28a745;
}
</style>

• Vue3版本使用:deep()：

<style scoped>
:deep(#checkboxId .custom-control-input:checked ~ .custom-control-label::before) {
  background-color: #28a745;
  border-color: #28a745;
}
</style>

注意事项

• 以上代码默认适配BootstrapVue 2.x版本，如果样式不生效，可以打开浏览器开发者工具，选中复选框元素，直接复制开发者工具中识别到的选中状态的选择器，替换上面的选择器即可适配不同版本。
• 如果需要全局修改所有复选框的选中样式，去掉选择器中的#checkboxId即可。

内容的提问来源于stack exchange，提问作者Tahmid Ali