Bootstrap button - remove outline on Chrome OS X

google-chrome button focus twitter-bootstrap-3 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;}

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

google-chrome button focus twitter-bootstrap-3 outline

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

google-chrome button focus twitter-bootstrap-3 outline

.btn:focus, .btn:active:focus, .btn.active:focus{    outline:none;    box-shadow:none;}

This should remove outline and box shadow

CodeHunter