css - 如何删除在BootstrapVue中单击b-form-checkbox后显示的边框

Question

在选择框中单击选项后，我试图删除边框。这里是vue部分：

<b-form-checkbox-group v-model="selected">
  <b-form-checkbox v-for= "element in options" :key="element.text">
    <div>{{element.text}}</div>
  </b-form-checkbox>
</b-form-checkbox-group>

和数据：

        selected: null,
        options: [{
            value: null,
            text: 'Please select an option'
          },
          {
            value: 'a',
            text: 'This is First option'
          },
          {
            value: 'b',
            text: 'Selected Option'
          },
          {
            value: {
              C: '3PO'
            },
            text: 'This is an option with object value'
          },
          {
            value: 'd',
            text: 'This one is disabled',
            disabled: true
          }
        ]
      }

我有类似的问题，但解决了它删除了 box-shadow。在这种情况下，我尝试过：

.custom-control-input, .custom-control-input::before, .custom-control-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

但没有任何改变。如何删除点击后显示的边框？

标签： cssnuxt.jsbootstrap-vue

Answer 1

.custom-control:focus {
    outline: none !important;
}