how to change background-color in bootstap-vue toggler button

Question

I am working vue js project for my own skill development.

When I change bootstrap-vue toggler background color but Unfortunately background-color isn't changed? I am new in Vue js. please solve this problem if you can?

Vue Structure:-

<div class="toggler-btn">
 <b-form-checkbox v-model="checked" name="check-button" switch>
 </b-form-checkbox>
</div>

Style:-

<style scoped>
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: red !important;
    background-color: red !important;
  }
</style>

score 0 · Answer 1 · answered Jun 12 '21 at 11:05

0

This may be due to the scoped styling. Try this:

 <style scoped>

      ::v-deep(.toggler-btn) {
          .custom-control-input:checked ~ .custom-control-label::before {
              color: #fff;
              border-color: red !important;
              background-color: red !important;
          }
      }

  </style>

answered Jun 12 '21 at 11:05

dantheman

3,189
2
10
18

Still not woking:-_- – Nazmul Jun 12 '21 at 11:09
can you try removing the scoped attribute? – dantheman Jun 12 '21 at 11:10
There are multiple different ways of deep styling in vue depending on your version. https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-or-v-deep-in-vue-js – dantheman Jun 12 '21 at 11:12
Yah. I remove scoped attribute but not working. – Nazmul Jun 12 '21 at 11:14

score 0 · Accepted Answer · answered Jun 13 '21 at 04:59

Your problem is because of style scoping. You can create a global.css and put all your global styles in there. I prepared a working code snippet based on your code to see that it's working.

new Vue({
  el: '#app'
})

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: red !important;
  background-color: red !important;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-checkbox name="check-button" switch size="lg" />
</div>

how to change background-color in bootstap-vue toggler button

2 Answers2