Bootstrap - 完美去除按钮点击后出现 “阴影边框“ 样式，按钮点击之后会有蓝色边框显示（全局 / 局部解决方案）

问题描述

您可能不想要此效果，想要去掉它。

正常情况下，点击按钮会出现阴影边框，如下图所示：

去除之后，点击就没有效果了：

解决方案

提供全局与局部解决方案，根据您的需求进行选择。

【局部】在当前页面内，加入以下代码。

.btn:hover, .btn:focus, .btn:active, .btn:visited {
    
    
    outline: none;
    box-shadow: none !important;
}

【全局】新建一个 reset.css 文件，在每个页面都引入此 “公共” 样式。

/* reset.css */
.btn:hover, .btn:focus, .btn:active, .btn:visited {
    
    
    outline: none;
    box-shadow: none !important;
}

代码一样，看您如何引入使用了。