本文介绍了Bootstrap 按钮 - 在 Chrome OS X 上删除轮廓的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am looking to achieve this:http://getbootstrap.com/javascript/#popovers-examples - scroll to the "live Demo" and hit the red popover button, in Chrome on OS X.... It's perfect beautiful

现在去这里(问题孩子):http://yoyo.io/javascript/#popovers - 它概述了蓝色,啊啊.

Now go here (the problem child): http://yoyo.io/javascript/#popovers - it outlines blue, aaaargh.

如果您检查一下,您会看到我为删除它所做的一连串 CSS 努力!它在 Safari 和 Firefox 中看起来正确,但在 Chrome 中不行!

If you inspect you will see a litany of CSS efforts from me to remove this!It looks correct in Safari and Firefox but a no go in Chrome!

任何人 - 我忽略了什么??

Anyone - what am I overlooking??

非常感谢!

推荐答案

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

I see .btn:focus has an outline on it:

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

尝试将其更改为:

.btn:focus {
  outline: none !important;
}

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

Basically, look for any instances of outline on :focused elements — that's what's causing it.

更新 - 对于 Bootstrap v4:

Update - For Bootstrap v4:

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

这篇关于Bootstrap 按钮 - 在 Chrome OS X 上删除轮廓的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 04:17