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

Question

I am struggling to change the default (blue) on checked background color of checkbox rendered through b-form-checkbox-group. Could not find a proper way from the docs of Bootstrap-vue even if it is there.

Code looks like below:

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

If it needs CSS modification, then it is fine too. Tried with different approaches but failed. Thanks in advance.

Answer 1

As mentioned in the tags of the question, I am using Bootstrap-vue in my VueJS application. The main problem was, I was trying to change the checkbox background by adding CSS classes and selectors within the Vue component that has scoped SCSS.

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

That was not working as styles for b-form-checkbox-group were global scoped.

Solution was to add the required CSS in the Common/Main SCSS file which was global scoped as well. Following CSS changes worked for me:

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