如何隐藏按钮轮廓

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

我已经尝试了以下代码的每种组合，但没有任何方法可以摆脱轮廓。

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

理论上，可以这样写：

button {
    outline: none; 
}

这将从按钮中删除选择边框。然而，在这种情况下我们需要!important在大纲属性上，以防止 Bootstrap 覆盖它（如下所示）。我还建议添加跨浏览器支持已知错误 https://stackoverflow.com/questions/19886843/how-to-remove-outline-border-from-input-button/19886893#19886893使用 Chrome 和 Firefox。

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;
}