更改 b-form-checkbox-group 的背景颜色

Question

我正在努力更改通过 b-form-checkbox-group 呈现的复选框的选中背景颜色的默认值（蓝色）。无法从 Bootstrap-vue 的文档中找到正确的方法，即使它在那里。

代码如下所示：

<b-form-group>
  <b-form-checkbox-group
    id="checkboxId"
    v-model="anArrayInDataHook"
    :options="anArrayInDataOrComputedHook"
    name="randomName">
  </b-form-checkbox-group>
</b-form-group>

如果需要CSS修改，也可以。尝试了不同的方法但失败了。提前致谢。

Answer 1

下面应该做的工作。

custom-control-label:after{ 
     background-color:red;  // just for sake of example.
}

怎么知道的？

只需检查您要修改的元素并查找导致此蓝色的属性。

Answer 2

如问题标签中所述，我在 VueJS 应用程序中使用 Bootstrap-vue。主要问题是，我试图通过在具有 scoped SCSS.[=18= 的 Vue component 中添加 CSS 类和选择器来更改 checkbox 背景]

<style scoped lang="scss">
    //CSS here
</style>

这不起作用，因为 b-form-checkbox-group 的样式是全局范围的。

解决方案是在 Common/Main SCSS 文件中添加所需的 CSS，该文件也是全局范围的。以下 CSS 更改对我有用：

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: $green-200;
    background-color: $green-100;
 }

更改 b-form-checkbox-group 的背景颜色

Change the background color of b-form-checkbox-group

css

checkbox

bootstrap-vue