Bootstrap按钮 - 删除Chrome OS X上的大纲

Question

我期待实现这一目标: http://getbootstrap.com/javascript/#popovers-examples -滚动到"现场演示"和打红酥料饼按钮,在Chrome OS X上....这是完美的美丽

现在去这里(问题小孩):http://yoyo.io/javascript/#popovers -它概括蓝色,aaaargh.

如果你检查一下,你会看到一连串的CSS努力将我删除!它看起来在Safari和Firefox中是正确的,但在Chrome中没有用!

任何人 - 我在俯瞰什么？

提前谢谢了!

Answer 1

我看到.btn:focus有一个outline:

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

尝试将其更改为:

.btn:focus {
  outline: none;
}

基本上,查找outlineon :focused元素的任何实例- 这就是导致它的原因.

Answer 2

对于像我这样的任何谷歌,...

.btn:focus {
    outline: none;
}

仍然无法在谷歌浏览器中工作,以下应完全删除任何按钮发光.

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

Answer 3

.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

这应该删除轮廓和框阴影

Answer 4

在bootstrap 4中,不再使用轮廓,而是使用框阴影.如果是您的情况,请执行以下操作:

.btn:focus {
    box-shadow: none;
}

Answer 5

.btn.active或.btn.focus单独不能覆盖 Bootstrap的样式.对于默认主题:

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

Answer 6

使用scss：

$btn-focus-box-shadow: none!important;