Override CSS for specific Bootstrapvue Components

Question

first Question here so please educate me if i'm doing this wrong.

So im working on an SPA that uses BootsrapVue and i created a view that uses a

<b-form-checkbox-group
                v-model="anything"
                :options="options"
                :disabled="ifDisabled"
                button-variant="outline-secondary"
                buttons
              >

when this gets rendered i get this html:

<fieldset data-v-3bacc3f3 class="form-group" id="__BVID__38">
  <legend tabindex=-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__38__label_">Selector</legend>
  <div>
    <div> data-v-3baac3f3 role="group" tabindex="-1" class="btn-group-toggle btn-group bv-no-focus-ring" id="__BVID__39">
      <label class="btn btn-outline-secondary disabled atcive">
        <input type="checkbox" name="buttons-1" disabled="disabled" class value="100" id="__BVID__39_BV_option_0">
        <span>100</span>
...

now i've tried alot of stuff but cant figure out how i am able to override the scss styles for the options. Preferably only in this scope, but i cant even manage to do it globaly.

I'm even having trouble figuring out the right place where i should be looking to change css for :hover and :focus.

please help!

i already tried to edit .btn:hover{ background-color: red !important; } without success! tried various other selectors without any effect. — Max Stöber, Mar 14 '22 at 15:41
the problem is that the element i want to style is generated by the bootstrap form group... my input for those elements is the options parameter of the parent group so i cant really give them custom classes. — Max Stöber, Mar 15 '22 at 08:13

tao · Accepted Answer · 2022-03-16T12:01:07.763

This works:

<style lang="scss">
.btn-group-toggle:not(#_) label {
  /* general styles */
  &.disabled {
  }
  &.focus {
  }
  &.active {
  }
  &:hover {
  }
}
</style>

When adding scoped attribute to the <style> tag, you're largely at the hand of your installed pre-processor which might or might not be able to parse >>>, /deep/, ::v-deep or :deep(), depending on version.

To stay away from such issues, I use the suggestion made in Vue Loader's docs: I create a separate <style> tag for bootstrap-vue internals, without the scoped attribute and keep the rest of component style rules in a <style scoped>.

Working demo.

Override CSS for specific Bootstrapvue Components

1 Answers1