如何删除在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
          }
        ]
      }

我也遇到类似的问题，但解决了它，消除了阴影。我尝试过这种情况：

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

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

Answer 1