使用Bootstrap 3删除Contact Button周围的蓝色边框

Question

我一直在我的网站上实现Bootstrap 3，在选择“联系人”按钮并关闭出现的弹出窗口后，我目前遇到了这个问题：

我不希望在关闭弹出窗口后以任何方式点亮或突出显示联系人。我需要在CSS文件中编辑什么才能使其正常工作？

感谢。

编辑：这是我的代码显示我的导航栏，包含我的所有选项。我相信我应该在这里选择一些东西来编辑Contact区域的CSS。

Answer 1

在CSS中，focus伪类用于为键盘当前定位的元素设置样式，或者由鼠标激活。

点击按钮，Bootstrap通过btn:focus，btn-primary:focus等等为您的按钮添加样式。 Bootstrap添加的样式之一是按钮周围的边框。要覆盖此样式，您可以创建一个隐藏按钮边框的选择器。例如，你可以这样做。

.btn:focus {
    border: none; 
}

如果这不起作用，请尝试

 .btn:focus {
        border: none !important; 
 }

Answer 2

这样就可以看到示例：https://jsfiddle.net/DIRTY_SMITH/LLvkptuk/

将此添加到您的CSS：

.btn:focus,
.btn:active {
  outline: none !important;
}

Answer 3

检查

input[type="button"]:focus, 
input[type="submit"]:focus {    
    outline: none !important;   
 } /* for forms */ 

a:focus { 
    outline: none !important;
 } /* for anchor */