comment supprimer la ligne pointillée autour de l'élément cliqué en html

114

J'ai trouvé que s'il y a un alien dans la page qui ne renvoie pas à une nouvelle page, alors lorsque l'utilisateur clique dessus, il y aura une ligne en pointillé autour de l'élément, il ne disparaîtra que lorsque l'utilisateur cliquera sur autre chose dans la page, comment supprimer cela?

Exemple:

entrez la description de l'image ici

Notez la ligne pointillée autour de l'élément Section 2.

html css hguser
la source
Comment conserver le contour pour les tabulations dans les éléments, mais le supprimer quand on clique dessus?
Costa

Réponses:

198

Utiliser outline:nonepour ancrer la classe de balises

Sowmya
la source
Merci mais cela ne fonctionne pas pour moi, j'ai créé tellement de liens auparavant que je n'ai jamais eu ce problème jusqu'à présent. mais maintenant je suis confus alors quelle est la raison avant de présenter?
Durga Rao
17
Notez que cela nuira à l' accessibilité de votre site Web.
mike23
3
@Durgaprasad voir la réponse de Marks. Vous devez également l'appliquer a:active, a:focus.
Odys
Je suis d'accord avec mike23. Ma tentative pour parvenir à un compromis consiste à, lors de l'événement de clic (ou peut-être que mouseup serait encore mieux?), Supprimer le contour de ce lien (tout en réinitialisant tous les liens pour avoir un contour juste avant ladite suppression.) . Sinon, les choses restent cumulativement bloquées sans être décrites). Cela supprime temporairement le contour du dernier élément sur lequel vous avez cliqué tout en le conservant sur les autres, afin que vous puissiez toujours savoir ce que vous parcourez.
Max Starkenburg
1
@cpu_meltdown Tryinput:focus{outline: none}
Sowmya
55

Comme @Lo Juego l'a dit, lisez l'article

a, a:active, a:focus {
   outline: none;
}
marque
la source
8

Essayez avec !importantin css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!
Akash
la source
7

Pour supprimer tous les contours pointés, y compris ceux des bootstrapthèmes.

a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
    outline: none;
    outline: 0;
}

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

Remarque: vous devez ajouter le lien href pour bootstrap css avant le css principal, afin que bootstrap ne remplace pas votre style.

OldTrain
la source
3

La suppression outlinenuira à l'accessibilité d'un site Web, c'est pourquoi je laisse cela là, mais je le rends invisible.

a {
   outline: transparent;
}
chankruze
la source
1
Définir le contour pour être transparent nuit toujours à l'accessibilité de votre site Web. L'idée est qu'elle fournit un indicateur visuel qu'un élément est focalisé. Si vous le rendez non visible, cet indicateur est perdu. Plus d'infos ici: outlinenone.com
ktbee
1

Dans mon cas, c'était un bouton, et apparemment, avec des boutons, ce n'est qu'un problème dans Firefox. Solution trouvée ici :

button::-moz-focus-inner {
  border: 0;
}
Andrew
la source
0

Son simple essai ci-dessous le code -

a{
outline: medium none !important;
}

Si joyeux acclamations! Bonne journée

Loyola
la source