Pourquoi l'autofocus laisse-t-il une ligne pointillée autour du bouton?

Question

J'ai un groupe de boutons et j'essaye de mettre le premier bouton dedans pour être actif quand la page se charge. Je n'utilise pas .active car alors quand j'appuie sur les autres boutons l'actif reste sur ce premier bouton et je devrais alors utiliser JS pour changer l'état des boutons. Donc j'utilise autofocus comme attribut. Comme ça.

<div id="resultOption" class="btn-group btn-group-lg" role="group" aria-label="..."> 
       <button type="button" class="btn btn-default" autofocus>Events</button> 
       <button type="button" class="btn btn-default">Hosts</button> 
       <button type="button" class="btn btn-default">Teachers</button> 
      </div> 

mais quand je charge la page il y a une ligne pointillée bizarre autour du bouton comme celui-ci

Si je clique sur le bouton ou un autre bouton, il va, mais il semble mauvais et Je ne veux pas cette ligne pointillée bizarre.

J'utilise IE 11

Answer 1

Définissez la contour attribut CSS à 0 ou none.

Exemple:

:focus { outline: none; }