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? <img src="https://i.stack.imgur.com/JzXPw.jpg" alt="enter image description here"> Here's the CSS <pre class="prettyprint"><code> #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;} </code></pre>

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

Remove focus attribute on click Bootstrap

Tags:

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?

enter image description here

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