覆盖引导单选按钮答案

【问题标题】：Overriding Bootstrap's Radio Button覆盖引导单选按钮
【发布时间】：2021-01-16 01:47:55
【问题描述】：

我正在使用带有 Bootstrap-vue 的 Vue。我无法覆盖单选按钮的样式。是不是不能覆盖样式？

这是我想要的，这就是它的外观。

我还在每个 css 属性中添加了 !important，或者将所有 css 移动到 index.htm 而不是组件中的 <style scoped>，但它们都不起作用。

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/bootstrap-vue@2.17.3/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@5.0.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-vue@2.17.3/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>

【问题讨论】：

标签： twitter-bootstrap vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

你的 CSS 选择器是错误的，这就是你没有看到任何变化的原因。

.custom-control-label:checked:after你正在检查标签是否被检查，但需要检查输入是否被检查，然后将样式应用于兄弟标签。

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

如果您尝试在作用域样式标记 (<style scoped>) 中添加这些样式，则可能需要使用 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/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.3/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>

您还在 sn-p 中加载 Bootstrap 5，但 Bootstrap-Vue 尚不支持。因此，如果您使用的是 Bootstrap 5，您可能会遇到一些不一致的情况。

【讨论】：