Comment supprimer le contour en pointillés de Firefox sur les BOUTONS ainsi que les liens?

Je peux faire en sorte que Firefox n'affiche pas les contours laids en pointillés sur les liens avec ceci:

a:focus { 
    outline: none; 
}

Mais comment puis-je faire cela pour les <button>balises également? Quand je fais ça:

button:focus { 
    outline: none; 
}

les boutons ont toujours le contour de mise au point en pointillé lorsque je clique dessus.

(et oui, je sais que c'est un problème d'utilisabilité, mais je voudrais fournir mes propres conseils de mise au point qui sont appropriés à la conception au lieu de points gris laids)

button::-moz-focus-inner {
  border: 0;
}

Pas besoin de définir un sélecteur.

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Cependant, cela viole les meilleures pratiques d'accessibilité du W3C. Le plan est là pour aider ceux qui naviguent avec des claviers.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Si vous préférez utiliser CSS pour vous débarrasser du contour en pointillé:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Ce qui suit a fonctionné pour moi en cas de LIENS, pensé au partage - au cas où quelqu'un serait intéressé.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

À votre santé!

:focus, :active {
    outline: 0;
    border: 0;
}

[Mise à jour] Cette solution ne fonctionne plus. La solution qui a fonctionné pour moi est celle-ci https://stackoverflow.com/a/3844452/925560

La réponse marquée comme correcte ne fonctionnait pas avec Firefox 24.0.

Pour supprimer le contour en pointillés de Firefox sur les boutons et les balises d'ancrage, j'ai ajouté le code ci-dessous:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

J'ai trouvé la solution ici: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

J'ai essayé la plupart des réponses ici, mais aucune n'a fonctionné pour moi. Quand j'ai réalisé que je devais aussi me débarrasser du contour bleu des boutons sur Chrome, j'ai trouvé une autre solution. Supprimer la bordure bleue du bouton de style personnalisé CSS dans Chrome

Ce code a fonctionné pour moi sur Firefox version 30 sur Windows 7. Peut-être qu'il pourrait aider quelqu'un d'autre là-bas :)

button:focus {outline:0 !important;}

Il n'y a aucun moyen de supprimer ces focus en pointillés dans Firefox en utilisant CSS.

Si vous avez accès aux ordinateurs sur lesquels votre application Web fonctionne, accédez à about: config dans Firefox et définissez-le browser.display.focus_ring_widthsur 0. Ensuite, Firefox n'affichera aucune bordure en pointillés.

Le bogue suivant explique le sujet: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Il existe de nombreuses solutions sur le Web pour cela, dont beaucoup fonctionnent, mais pour forcer cela, de sorte qu'absolument rien ne puisse mettre en évidence / se concentrer une fois par utiliser les éléments suivants:

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

Cela ajoute juste un peu de sécurité supplémentaire et scelle l'affaire!

Cela obtiendra le contrôle de la portée:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

De: Supprimer le contour en pointillé de l'élément d'entrée de plage dans Firefox

Testé sur Firefox 46 et Chrome 49 à l'aide de ce code.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Avant (des points blancs sont visibles)

Après (les points blancs sont invisibles)

Si vous souhaitez appliquer uniquement sur quelques champs de saisie, boutons, etc. Utilisez le code plus spécifique.

input[type=text] {
  outline: none !important;
}

Codage heureux !!

Ajoutez simplement ce css pour la case de sélection

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Cela fonctionne bien pour moi.

Je pense que vous devriez vraiment savoir ce que vous faites en supprimant le contour de la mise au point, car cela peut gâcher la navigation au clavier et l'accessibilité.

Si vous devez le retirer en raison d'un problème de conception, ajoutez un :focus état au bouton qui le remplace par un autre repère visuel, comme changer la bordure en une couleur plus lumineuse ou quelque chose comme ça.

Parfois, je ressens le besoin de supprimer ce contour ennuyeux, mais je prépare toujours un repère visuel de mise au point alternative.

Et n'utilisez jamais la blur()fonction js. Utilisez la ::-moz-focus-innerpseudo-classe.

Dans la plupart des cas, sans ajouter le !importantau code CSS, cela ne fonctionnera pas.

Alors n'oubliez pas d'ajouter !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

Ou tout autre code:

button::-moz-focus-inner {
  border: 0 !important;
}

button::-moz-focus-inner { border: 0; }

Où buttonpeut être le sélecteur CSS pour lequel vous souhaitez désactiver le comportement.

Vous voudrez peut-être intensifier la mise au point plutôt que de vous en débarrasser.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Supprimez le contour en pointillé des liens, du bouton et de l'élément d'entrée.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Si vous avez une bordure sur un bouton et que vous souhaitez masquer le contour en pointillés dans Firefox sans supprimer la bordure (et donc sa largeur supplémentaire sur le bouton), vous pouvez utiliser:

.button::-moz-focus-inner {
    border-color: transparent;
}

Le code CSS ci-dessous fonctionne pour supprimer cela:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Il semble que la seule façon d'y parvenir est de définir

browser.display.focus_ring_width = 0

dans about: config par navigateur.

Cela fonctionne sur Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Après avoir essayé de nombreuses options ci-dessus, seules les suivantes ont fonctionné pour moi.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Avec Bootstrap 3, j'ai utilisé ce code. Le deuxième ensemble de règles annule simplement ce que le bootstrap fait pour les boutons focus / actifs:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

REMARQUE: votre fichier css personnalisé doit venir après le fichier css Bootstrap dans votre code html pour le remplacer.

Oui ne manquez pas ! Important

button::-moz-focus-inner {
 border: 0 !important;
}

Vous pouvez essayer button::-moz-focus-inner {border: 0px solid transparent;}dans votre CSS.