Bootstrap Button Outline Still Working Only On click

Question

Using Bootstrap 3 at This Demo I tried to remove Buttons Blue Highlight/ Glow on click by using the following CSS roles:

.btn:focus { outline: none;}
.btn:hover { outline: none;}
.btn.active{ outline: none;}
.btn{outline: none;}

But I am still getting a very fast Highlight ONLY at Click time on the button and it disappears very fast after the class is active or have focus. Can you please let me know which portion of CSS is doing this and how I can stop it? Thanks

are u using Google Chrome? i think its the chrome's behavior to highlight focused elements. its different in other browsers. — yusefnejad, Jun 01 '14 at 08:23

score 4 · Answer 1 · edited May 23 '17 at 12:22

4

Use !important flag because the outline property is changed by other CSS styles probably:

You only need:

.btn {   
    outline: none !important;
}

Bootstrap Button Outline Still Working Only On click

1 Answers1