CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rachel S
Rachel S

Reputation: 3920

Remove focus attribute on click Bootstrap

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

Upvotes: 6

Views: 3420

Answers (3)

Evochrome
Evochrome

Reputation: 1215

if you're using jQuery, you could use

$(".dropdown-toggle").blur() to make it lose it's focus

For example:

JS:

var dropdown = $(".dropdown-toggle");

dropdown.on("click", function() {
  setTimeout(function(){           //loses focus after 0 milliseconds
    dropdown.blur();
  }, 0);
});

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

#refine2 .dropdown-toggle{
    background-color: transparent !important;
  }
  li.dropdown.open {
    background-color: transparent;
  }

JSFiddle

Hope it helped :)

Cheers!

EDIT: I just saw this is a 7 month old question already... But I hope it'll still help someone else :)

Upvotes: 0

Steven B.
Steven B.

Reputation: 9372

Kind of old but you can solve this issue by putting the border on the list item instead.
Working example.

#refine2 .dropdown-toggle:active {
  background-color:transparent; 
  border:0;
} 

#refine2 .dropdown-toggle:focus{ 
  background-color:transparent;
}

li.dropdown.open {
  border-top: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
}

Upvotes: 0

Acrux
Acrux

Reputation: 406

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

Upvotes: 1

Related Questions