Remove focus attribute on click Bootstrap

Question

I have a navbar with dropdown menus using Bootstrap. I created a border around the dropdown list item to make it look as if it's a tab. The border is only there on focus. The user clicks the tab to toggle it closed but the border still shows there as it's still in focus. How can I remove the focus after click?

Here's the CSS

    #refine2 .dropdown-toggle:active {background-color:transparent; border:0;} #refine2 .dropdown-toggle:focus {border-top: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3; background-color:transparent;}

Answer 1

Quick-fix: Set outline:0; in the css. This should remove the border.