如何隐藏按钮轮廓答案

【问题标题】：How to hide button outline如何隐藏按钮轮廓
【发布时间】：2015-06-09 18:56:17
【问题描述】：

我在这个页面上有很多按钮：https://jsfiddle.net/Android272/c150305z/

我已经尝试了以下代码的所有组合，但没有什么能摆脱大纲。

*:focus,
button,
button:focus,
button:active {
  outline: 0;
  outline-width: 0;
  outline: none;
  outline-style: none;
}

【问题讨论】：

你是不是有意使用border: none？
stackoverflow.com/a/19886893/383904
请看下面我的回答。有人说大纲是问题，但显然不是因为您覆盖了大纲属性。绝对是 twitter bootstrap 应用的 1px 边框。

标签： css

【解决方案1】：

您的 HTML 正在使用 twitter bootstrap 的 btn 和btn-primary 类

<button type="button" class="btn btn-primary circle"...></button>

这就是这些类的作用：

 .btn{
     border: 1px solid transparent;
 }

.btn-primary {
      color: #fff;
      background-color: #337ab7;
      border-color: #2e6da4;
 }

所以使用border: none;，那个烦人的蓝色边框就会消失！

https://jsfiddle.net/c150305z/16/

【讨论】：

【解决方案2】：

在这里更新了你的小提琴： Working Fiddle

就这一行： button { outline: none !important; }

【讨论】：

【解决方案3】：

理论上，可以这样写：

button {
    outline: none; 
}

这将从按钮中删除选择边框。但是，在这种情况下，我们需要在 outline 属性上使用!important 以防止 Bootstrap 覆盖它（见下文）。我还建议使用 Chrome 和 Firefox 添加对 known bug 的跨浏览器支持。

button {
    outline: none !important; 
}

input[type="button"]::-moz-focus-inner {
    border: 0;
}

另外，Bootstrap 将这些样式与焦点上的按钮相关联，您需要删除或覆盖这些样式。

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

用它来覆盖它：

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

【讨论】：