Bootstrap Vue change active button color

Question

I'm using bootstrap with Vue.js.

I have a form-checkbox-group like this

      <b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="selected"
          :options="options"
          :aria-describedby="ariaDescribedby"
          buttons
          button-variant="primary"
          size="lg"
          name="buttons-2"
        ></b-form-checkbox-group>
      </b-form-group>

I would like the selected button to be set to a specific color (rathen than it being just a little bit darker).

I tried adding the code below but unfortunately it doesn't work

.active {
  background: rgb(243, 16, 0) !important;
}

Full code here:

<template>
  <div class="Overview">
          <b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="selected"
          :options="options"
          :aria-describedby="ariaDescribedby"
          buttons
          button-variant="primary"
          size="lg"
          name="buttons-2"
        ></b-form-checkbox-group>
      </b-form-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "Control",
  data() {
    return {
      selected: "F1_Water",
      options: [
        { value: "F1_Water", text: "Water" },
        { value: "F1_Clean", text: "Cleaning solution" },
        { value: "F1_None", text: "None" }
      ]
    };
  }
};
</script>

<style>
.active {
  background: rgb(243, 16, 0) !important;
}
</style>

sebasaenz · Accepted Answer · 2021-01-14 16:44:15Z

3

You've missed the <style> opening tag after the </script> closing tag.

Have in mind that you shouldn't include scoped to it because the target of the css style is a different component (the b-form-checkbox-group component), so it would be just

<style>
  .active {
    background: rgb(243, 16, 0) !important;
  }
</style>

Here are the docs for the scoped CSS feature in Vue.js.

edited Jan 14, 2021 at 16:44

answered Jan 14, 2021 at 16:40

sebasaenz

1,9662 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SoaAlex Over a year ago

Ohh, I had no idea that the word scoped was so meaningfull. Indeed, removing it makes the css working perfectly as expected ! The missing style opening was just a mistake when removing unecessary code for this question, I'll edit this. Thanks !

Hiws Over a year ago

You should only remove scoped if you want this CSS to apply to your entire project. However, if you only want this CSS to apply to the component its in, you need to keep scoped. If you keep scoped you need to use a deep selector to target the sub-component.

Hiws Over a year ago

In general, you should always use scoped, to avoid CSS bleeding into other components, since it's very unpredictable. If you want global styles, you should create a global style sheet where you keep global styling.

Collectives™ on Stack Overflow

Bootstrap Vue change active button color

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related