css - 更改 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 修改，那也没关系。尝试了不同的方法但失败了。提前致谢。

标签： csscheckboxbootstrap-vue

Answer 1

如问题标签中所述，我Bootstrap-vue在我的VueJS 应用程序中使用。主要问题是，我试图通过在that has 中checkbox添加 CSS 类和选择器来更改背景。Vue componentscoped SCSS

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

这不适用于b-form-checkbox-group全局范围的样式。

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

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