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 dot

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 #ffffd;
border-bottom-color: transparent;
cursor: default;
}

Answer 2

To solve the issue for Firefox and all other browsers, I would use the following CSS:

/* Remove dotted outline from image inputs */
input::-moz-focus-inner {
  border: 0;
}

/* Remove dotted outline from all links */
a {
 outline: 0;
}

Answer 3

The 'disabled' class or state itself is NOT for assistive devices.

I don't know where that information came from but it is completely false. 'Disabled' is a STATE wherein the button or anchor is NOT ENABLED. Meaning the user cannot click on it. Or, clicking it triggers no action. People with disabilities are not affected in any way by use of this tag. BTW- I am the web developer/designer for a non-profit that provides support and services to people with disabilities and I test my pages on a variety of devices, including screen readers and other assistive devices.

The class for a tab with focus is .focus and the class for the active tab is .active.

Designing for accessibility is crucial so always check your code with a W3C-compliant validator (like https://validator.w3.org/). Occasionally, I've had to manually control the tab or arrow order for tabs on a site via JavaScript but, generally, Bootstrap handles it pretty well.

Example: I use the .disabled class for web forms all the time. I have the Submit button disabled until all the required fields contain the proper information. Then, simply remove the .disabled class and allow them to submit.

That said, you do need to include a border on focused/hover items for assistive devices. This allows the user to be able to track what they are 'hovering' over on your site. As mentioned above, you can restyle it to better fit your design or whatever but make sure you have something to indicate focus.

If anyone has countering info on this I'd be interested in reading it.

Answer 4

Use following CSS on your page:

html * {
    outline: 0 !important;
}

Answer 5

You can use the sample below ;)

.nav > li > a {
    outline:none;
}

Answer 6

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.