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 celui-ci a le focus dans un ordre de tabindex?

Je souhaite créer mon propre style pour un élément ciblé, mais il serait intéressant d'utiliser la fonctionnalité existante, car avec tabindex, il est possible de lier l'événement keydown à l'élément dom.

Answer 1

Créez simplement une règle CSS pour les éléments que vous voulez et 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 celle 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

a {
outline: 0;
}

a: hover,
a: active,
a: focus {
     outline: none;
}

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

Answer 5

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

Answer 6

:focus state - Définissez la propriété outline sur 0px solid transparent;