Comment supprimer le contour pointillé de Firefox sur les boutons ainsi que les liens?

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

si vous préférez utiliser CSS pour se débarrasser du contour 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; 
    }

ci - dessous travaillé pour moi en cas de liens, pensée de partage-au cas où quelqu'un est intéressé.

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

santé!

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

[Update] 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 n'a pas fonctionné avec Firefox 24.0.

pour enlever le contour pointillé de Firefox sur les boutons et les étiquettes 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

a essayé la plupart des réponses ici, mais aucune d'elles n'a fonctionné pour moi. Quand j'ai réalisé que je dois me débarrasser du contour bleu sur les boutons sur Chrome aussi, j'ai trouvé une autre solution. enlever la bordure bleue du bouton css custom-styled dans Chrome

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

button:focus {outline:0 !important;}

il n'y a aucun moyen d'enlever ces points de mise au point dans Firefox en utilisant CSS.

si vous avez accès aux ordinateurs où votre webapplication fonctionne, allez à about:config dans Firefox et mettez browser.display.focus_ring_width à 0. Alors Firefox ne montrera pas de bordures pointillées.

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

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

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

il y a beaucoup de solutions trouvées sur le web pour cela, dont beaucoup fonctionnent, mais pour forcer cela, de sorte qu'absolument rien ne peut mettre en évidence / se concentrer une fois une utilisation de ce qui suit:

::-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!

testé sur Firefox 46 et Chrome 49 en utilisant 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 seulement sur quelques champs d'entrée, boutons, etc. L'utilisation la plus code spécifique.

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

Bon Codage!!

supprimer les contours pointillés des liens, des boutons et des éléments 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;
}

il suffit D'ajouter ce css pour sélectionner la case

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

ça marche très bien pour moi.

le code CSS ci-dessous fonctionne pour supprimer ceci:

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 le seul moyen d'y parvenir est de définir

browser.display.focus_ring_width = 0

dans about:config par navigateur.

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

où button peut être n'importe quel sélecteur CSS pour lequel vous voulez désactiver le comportement.

Vous pourriez vouloir intensifier les se concentrent plutôt que de se débarrasser d'elle.

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

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

je pense que vous devriez vraiment savoir ce que vous faites en retirant le plan de mise au point, parce qu'il peut tout gâcher pour la navigation et l'accessibilité du clavier.

si vous devez l'enlever à cause d'un problème de design, Ajoutez un État :focus au bouton qui le remplace par un autre signal visuel, comme changer la bordure pour une couleur plus brillante ou quelque chose comme ça.

Parfois je ressens le besoin d'enlever ce contour ennuyeux, mais je préparez toujours une autre mise au point visuelle.

et jamais utilisez la fonction blur() js. Utilisez la pseudo classe ::-moz-focus-inner .

si vous avez une bordure sur un bouton et que vous voulez cacher le contour en pointillés dans Firefox sans enlever la bordure (et donc c'est la largeur supplémentaire sur le bouton) vous pouvez utiliser:

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

cela va obtenir 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 les contours pointillés de l'élément d'entrée range dans Firefox

cela fonctionne sur firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

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

après avoir essayé beaucoup d'options de ce qui précède seulement les suivants ont travaillé 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 juste annuler ce que bootstrap fait pour les boutons de mise au point/active:

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

notez que votre fichier CSS personnalisé doit venir après Bootstrap fichier css dans votre code html pour le remplacer.