CODEWITHSUNDEEP
csscheckboxbootstrap-vue
Tahmid Ali
Tahmid Ali

Reputation: 815

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

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.

Upvotes: 2

Views: 4884

Answers (2)

Tahmid Ali
Tahmid Ali

Reputation: 815

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;
 }

Upvotes: 3

Suryansh Singh
Suryansh Singh

Reputation: 1173

Following should do the work.

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

How to know this?

Just inspect the element you want to modify and look for property causing this blue color.

Upvotes: 1

Related Questions