Question Comment supprimer le contour pointillé de Firefox sur BOUTONS ainsi que des liens?


Je peux faire en sorte que Firefox n'affiche pas les contours de mise en évidence pointillés laids sur liens avec ça:

a:focus { 
    outline: none; 
}

Mais comment puis-je le faire pour <button> tags aussi bien? Quand je fais ceci:

button:focus { 
    outline: none; 
}

les boutons ont toujours le contour en pointillé lorsque je clique dessus.

(et oui, je sais que c'est un problème de convivialité, mais je voudrais fournir mes propres conseils de mise au point qui conviennent au design au lieu de points gris laids)


426
2017-09-16 10:35


origine


Réponses:


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

630
2017-10-13 22:46



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 contour est là pour aider ceux qui naviguent avec des claviers.

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


259
2017-10-02 05:01



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 : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

46
2017-10-25 23:00



Le ci-dessous a fonctionné pour moi en cas de liens, pensé à partager - au cas où quelqu'un serait intéressé.

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

À votre santé!


40
2017-10-02 18:22



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

20
2018-06-27 23:11



[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 pointillé 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


9
2017-09-24 22:17



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

Ce code a fonctionné pour moi sur Firefox version 30 sur Windows 7. Peut-être que cela pourrait aider quelqu'un d'autre :)

button:focus {outline:0 !important;}

7
2017-07-16 21:54



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

Si vous avez accès aux ordinateurs sur lesquels votre application Web fonctionne, allez à: config dans Firefox et définissez browser.display.focus_ring_width à 0. Alors Firefox ne montrera aucune bordure pointillée du tout.

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


5
2017-09-16 11:06



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

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

4
2017-08-08 13:23