Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove halo after click from buttons in Bootstrap?

I'm making a button in Bootstrap and it looks fine. However, whenever I click on the button, at least in chrome, it displays a blue halo glow around the edges of the button until I click some other part of the screen. Is there a way to eliminate this blue glow?

I have seen this question asked here : https://stackoverflow.com/questions/22999328/how-to-remove-the-border-from-search-box-after-clicking but the only answer was a comment to add .yourbox:focus { border: 0 !important; } to the stylesheet. I did that and added the class "yourbox" to the button, but it didn't change anything. This is the current code for my button:

<button type="button" class="btn btn-info btn-block">
Button
</button>
like image 761
Thomas Avatar asked Dec 20 '22 05:12

Thomas


1 Answers

Removing the outline on focus should help you out, tested.

.btn:focus {
    outline: 0;
}
like image 92
Stickers Avatar answered Jan 08 '23 09:01

Stickers