时间戳

首页 > 解决方案 > 覆盖 Bootstrap 的单选按钮

twitter-bootstrap - 覆盖 Bootstrap 的单选按钮

问题描述

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

这就是我想要我想要的是的，这就是它的样子默认自举样式。

我还添加!important到每个 css 道具或将所有 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-bootstrapvue.jsbootstrap-4bootstrap-vue

解决方案

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

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

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

如果您尝试在作用域样式标记 ( <style scoped>) 中添加这些样式，则可能需要使用深度选择器。

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>

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

推荐阅读