google-chrome - Bootstrap 按钮 - 删除 Chrome OS X 上的轮廓

Question

我希望实现这一目标: http://getbootstrap.com/javascript/#popovers-examples - 在 OS X 上的 Chrome 中，滚动到“实时演示”并点击红色弹出按钮......它非常漂亮

然而，在我自己的代码中，它的轮廓是蓝色的，尽管我做了一系列 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 !important;
}

基本上，在 :focus 元素上查找 outline 的任何实例 - 这就是导致它的原因。

更新 - 对于 Bootstrap v4:

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