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
Now go here (the problem child): http://yoyo.io/javascript/#popovers - it outlines blue, aaaargh.
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??
Many thanks in advance!
I see .btn:focus
has an outline
on it:
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Try changing this to:
.btn:focus {
outline: none !important;
}
Basically, look for any instances of outline
on :focus
ed elements — that's what's causing it.
Update - For Bootstrap v4:
.btn:focus {
box-shadow: none;
}