如何在bootstrap-4中删除按钮发光

Question

当您单击按钮时，如何移除按钮周围出现的发光？

<div class="container">
  <div class="row">
      <div class="col-md-12 mt-5">
          <button type="button" class="btn btn-primary">Primary</button>
      </div>
  </div>
</div>

https://www.bootply.com/vHRldZZt8u

Answer 1

css：

.btn-primary:focus,
.btn-primary:active{
    box-shadow:none !important;
    outline:0px !important;
}

尝试此CSS代码，将.btn-primary替换为您各自的类.btn-*

Answer 2

我有一个解决方案，它删除了任何元素(css选择器：*)的发光，你可以在组件上定义轮廓，但你需要在CSS类中指定它。

*:hover,
*:focus,
*:active
 {
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
}

Answer 3

这段代码似乎已经解决了这个问题：

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:focus, .btn-primary.focus
{
    box-shadow:none;
}