Supprimer ou désactiver la bordure de mise au point du navigateur via javascript

Question

Quelqu'un sait-il comment désactiver ou manipuler la bordure pointillée (dans la plupart des navigateurs) d'un élément dom si elle a le focus dans un ordre tabindex ?

Je veux construire mon propre style pour un élément focalisé, mais il serait génial d'utiliser la fonctionnalité existante, car avec tabindex il est possible de lier l'événement keydown à l'élément dom.

Answer 1

Il suffit de créer une règle CSS pour les éléments que vous voulez qui ont outline:none;

Answer 2

Astuce CSS :

:focus { outline: none; }

Answer 3

Avec Firefox 53.0, si je désactive le contour avec l'une des solutions proposées, Firefox affiche le contour par défaut.

Cependant, si j'utilise une couleur vierge, cela ne détecte pas que le contour est masqué :

input:focus{
   outline: 1px solid rgba(255,255,255,1);
}

Answer 4

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

Answer 5

La méthode classique est définie sur aucun :

outline: none;

Cependant, il ne fonctionnait plus sur le navigateur de version supérieure ou FireFox. Cette astuce marche pour moi :

outline: 0px solid transparent;

LOL. À l'avenir, s'il a détecté transparent, il suffit de remplacer par un peu plus haut transparent :

outline: 0px solid rgba(0,0,0,0.001);

Certains navigateurs, c'était aussi une ombre de boîte :

outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;