引导按钮禁用轮廓答案

【问题标题】：Bootstrap button disabled outline引导按钮禁用轮廓
【发布时间】：2014-11-14 01:23:59
【问题描述】：

我正在为我的项目使用引导程序，并且不喜欢按下时具有蓝色轮廓的按钮，如何禁用蓝色轮廓？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

对于按钮，您需要修改焦点按钮的大纲属性。这对你有用

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 0;
}

看看这个CodePen 看看它的实际效果。希望这会有所帮助。

【讨论】：

【解决方案2】：

有些浏览器自己加了这样的边框，然后很难去掉。但是 Bootstrap 也给一些表单输入元素添加了这样的蓝色边框。有几个关于如何修改它的问题的答案，例如How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?。在您的情况下，您可以设置 border: none; 以尝试将其删除。但正如我所说，它也可能是一个浏览器功能，与 Bootstrap 无关，所以你只需要尝试一下。

【讨论】：

【解决方案3】：

将此代码添加到您的 CSS 中：

.form-control:focus {
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

（根据需要更改边框颜色）

【讨论】：