Les onglets basculants de Bootstrap - Suppression du contour / de la mise au point ?

Question

J'utilise Toggable Tabs de Twitters Bootstrap

Le problème que j'ai, Même vous pouvez voir dans l'exemple aussi. Lorsque l'utilisateur clique sur l'onglet, l'onglet actif est entouré d'une bordure en pointillés.

J'utilise Firefox 11. Capture d'écran du problème :

Je cherche à me débarrasser de cette bordure en pointillés. Quelqu'un sait-il comment s'y prendre ?

Gracias

Answer 1

Essayez d'utiliser outline: 0; sur l'élément de lien. voir css-tricks.com/removing-the-dotted-outline (en anglais)

//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

Vous voulez dire le contour, vous pouvez le supprimer comme suit :

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

Cependant, je vous suggère de le laisser, car il est là en partie pour aider les personnes handicapées et les lecteurs d'écran à afficher votre contenu correctement, et vous affecteriez donc la convivialité en le supprimant.

Answer 3

Utilisez les CSS suivants sur votre page :

html * {
    outline: 0 !important;
}

Answer 4

Pour résoudre le problème pour Firefox et tous les autres navigateurs, j'utiliserais le CSS suivant :

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

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

Answer 5

Cette bordure de mise au point est une caractéristique d'accessibilité. En la supprimant, vous empêchez certaines personnes d'accéder à votre site. Par "certains", j'entends les personnes handicapées.

Cette vidéo aide à comprendre ce que je veux dire (il a une mobilité réduite). ( Le voici transféré quand il se moque de la suppression de la frontière).