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
source

Comment conserver le contour pour les tabulations dans les éléments, mais le supprimer quand on clique dessus?

— Costa

198

Utiliser outline:nonepour ancrer la classe de balises

— Sowmya
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
source

12

a {
    outline: 0;
  }

Mais lisez ceci avant de le changer:

suppression-du-contour-pointillé

— Lo Juego
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
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
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
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
source

0

Son simple essai ci-dessous le code -

a{
outline: medium none !important;
}

Si joyeux acclamations! Bonne journée

— Loyola
source