如何删除在BootstrapVue

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

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

Answer 2

怎么样？

input.custom-control-input:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}