Bootstrap's Togglable Tabs - Removing outline / focus ?

Question

I am using Toggable Tabs from Twitters Bootstrap

The problem I have, Even you can see from the example too. That when the user clicks the tab, The active tab has the dotted border around it.

I am using Firefox 11. Screenshot of the issue:

I am looking to get rid of that dotted border. Does anyone know how you do this?

Thanks

Answer 1

try using outline: 0; on the link element. see css-tricks.com/removing-the-dotted-outline

//line 2576 of bootstrap.css .nav-tabs > .active > a, .nav-tabs > .active > a:hover {  outline: 0; color: #555555; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; } 

Answer 2

You mean the outline, you can remove it as follows:

.nav-tabs > .active > a, .nav-tabs > .active > a:hover {   outline:none; } 

Though i would suggest you leave it in, since it is there in part to help people with disabilities and screen readers display your content properly, so you would be affecting usability by removing it.