Bootstrap button - remove outline on Chrome OS X

Question

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

However, in my own code it outlines blue, despite a litany of CSS efforts from me to remove this!

It looks correct in Safari and Firefox but a no go in Chrome!

Answer 1

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 :focused elements — that's what's causing it.

Update - For Bootstrap v4:

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

Answer 2

For any googlers like me, where..

.btn:focus {
    outline: none;
}

still didn't work in Google Chrome, the following should completely remove any button glow.

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

This should remove outline and box shadow