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

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!

Answer 1

you can put this tag into your html.

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

I used on focus because onclick still displayed the glow for a microsecond and made a horrible looking flash in terms of using it. This seemed to get rid after all the css methods failed.

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