Question

我的网页上有很多按钮：https://jsfiddle.net/Android272/c150305z/

我已尝试过以下代码的每个组合，但没有什么可以摆脱大纲。

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

Answer 1

在此处更新了您的小提琴： Working Fiddle

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

Answer 2

理论上，人们可以写：

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

Answer 3

您的HTML正在使用Twitter bootstrap btn和btn-primary clasess

<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/

如何隐藏按钮轮廓

3 个答案: