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;
}

Answer 4

一般来说，我所做的是向按钮添加一个自己的类，选择等...然后禁用框阴影。

例如，这就是我如何将自己的 FOCUS 效果放在 Bootstrap 4 中的 SELECT 下拉列表中：

HTML：

<select class="custom-select my_custom_dropdown">
    <option class="my_custom_dropdown_option">" value="_below">Below this item</option>
    <option class="my_custom_dropdown_option" value="_inside">Inside this item</option>
</select>

CSS：

.my_custom_dropdown:focus{
    
    outline: none !important;
    border:2px solid #FF4519;
    text-decoration: none;
    
    box-shadow: none !important;
    -webkit-appearance: none;   
}

专注于：

box-shadow none 会移除 Bootstrap 4 的高光效果。

并且边框线会添加我自己的自定义边框效果。

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

4 个答案: