Overriding Bootstrap's Radio Button

Question

I am using Vue with Bootstrap-vue. I am unable to override the style of radio buttons. Is it impossible to override the style?

Here is how I want and this is how it looks .

I also added !importantto each css prop or move all css to index.htm instead of <style scoped>in the component, but none of them worked.

new Vue({
  el: '#app',
  data: () => ({

    options: [{
        text: "First",
        value: "A"
      },
      {
        text: "Second",
        value: "B",
        disabled: false
      }
    ]
  })
})

.custom-control-label:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #d1d3d1;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

.custom-control-label:after {
  position: absolute;
  left: -999em;
}

.custom-control-label:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #ffa500;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form>
    <b-form-group>
      <b-form-radio-group :options="options" />
    </b-form-group>

  </b-form>
</div>

Answer 1

You're CSS selectors are wrong, that's why you're not seeing any changes.

.custom-control-label:checked:after You're checking if the label is checked, but need to check if the input is checked and then apply a style to the sibling label.

.custom-control-input:checked ~ .custom-control-label:after

If you're trying to add these styles in a scoped style tag (<style scoped>), you might need to use a deep selector.

new Vue({
  el: '#app',
  data: () => ({
    options: [{
        text: "First",
        value: "A"
      },
      {
        text: "Second",
        value: "B",
        disabled: false
      }
    ]
  })
})

.custom-control-input:checked ~ .custom-control-label:after {
  background-image: none !important;
  border: 0;
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<div id="app">
  <b-form>
    <b-form-group>
      <b-form-radio-group :options="options" />
    </b-form-group>
  </b-form>
</div>

You're also loading Bootstrap 5 in your snippet, which Bootstrap-Vue doesn't support yet. So if you're using Bootstrap 5 you might get some inconsistencies.