使用 Bootstrap 3 移除联系人按钮周围的蓝色边框答案

【问题标题】：Removing blue border around Contact Button, using Bootstrap 3使用 Bootstrap 3 移除联系人按钮周围的蓝色边框
【发布时间】：2016-05-13 08:40:13
【问题描述】：

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

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

谢谢。

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

【问题讨论】：

添加你的代码，不要简单地添加图片，它并没有任何帮助。

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

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

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

.btn:focus {
    border: none; 
}

如果这不起作用，请尝试

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

【讨论】：

这里的问题是我本身并没有使用按钮，但联系人位于具有一堆类的 ul 内的导航栏上。查看我的编辑以获取显示我的代码的图像。
使用浏览器的 DOM Explorer，选择与您的Contact 对应的元素。单击联系人并跟踪单击所做的 CSS 更改。您应该注意到相应的元素添加了边框或轮廓。在你的 CSS 中覆盖该属性

【解决方案2】：

这将为您完成，请参见示例：https://jsfiddle.net/DIRTY_SMITH/LLvkptuk/

将此添加到您的 CSS：

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

【讨论】：

【解决方案3】：

检查一下

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

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

【讨论】：

这样就解决了蓝色边框的问题，但是选中元素后“Contact”仍然亮着。