使用 Bootstrap 删除联系按钮周围的蓝色边框 3

Question

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

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

谢谢。

编辑：这是我的代码，显示了我的导航栏和我的所有选项。我想我应该在此处 select 一些内容，以便编辑联系区域的 CSS。

Answer 1

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

通过单击按钮，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 */

使用 Bootstrap 删除联系按钮周围的蓝色边框 3

Removing blue border around Contact Button, using Bootstrap 3

css

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3