So entfernen Sie die gepunktete Linie um das angeklickte Element in HTML

114

Ich habe festgestellt, dass, wenn aauf der Seite ein Link vorhanden ist, der nicht auf eine neue Seite verweist, beim Klicken des Benutzers eine gepunktete Linie um das Element angezeigt wird, die nur verschwindet, wenn der Benutzer auf etwas anderes auf der Seite klickt um dies zu entfernen?

Beispiel:

Geben Sie hier die Bildbeschreibung ein

Beachten Sie die gepunktete Linie um das Element Section 2.

html css hguser
quelle
Wie können Sie den Umriss für das Durchblättern von Elementen beibehalten, ihn jedoch entfernen, wenn Sie auf einen klicken?
Costa

Antworten:

198

Verwenden Sie outline:nonediese Option , um die Tag-Klasse zu verankern

Sowmya
quelle
Danke, aber es funktioniert nicht bei mir. Ich habe zuvor so viele Links erstellt, dass ich dieses Problem bis jetzt nie bekomme. aber jetzt bin ich verwirrt, also was ist der Grund vor der Gegenwart?
Durga Rao
17
Beachten Sie, dass dies die Zugänglichkeit Ihrer Website beeinträchtigt.
Mike23
3
@ Durgaprasad siehe Marks Antwort. Sie müssen das auch anwenden a:active, a:focus.
Odys
Ich stimme w / mike23 zu. Mein Versuch, einen Kompromiss zu erzielen, besteht darin, beim Klickereignis (oder wäre Mouseup sogar noch besser?) Die Gliederung nur für diesen Link zu entfernen (und gleichzeitig alle Links zurückzusetzen, um unmittelbar vor der Entfernung eine Gliederung zu erhalten. sonst bleiben die Dinge kumulativ hängen, wenn sie nicht umrissen sind). Dadurch wird der Umriss vorübergehend aus dem zuletzt angeklickten Element entfernt, während er auf anderen Elementen verbleibt, sodass Sie immer noch wissen, was Sie gerade durchgehen.
Max Starkenburg
1
@cpu_meltdown Tryinput:focus{outline: none}
Sowmya
55

Wie @Lo Juego sagte, lesen Sie den Artikel

a, a:active, a:focus {
   outline: none;
}
Kennzeichen
quelle
8

Versuchen Sie es mit !importantin css.

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

Entfernen aller gepunkteten Umrisse, einschließlich der in bootstrapThemen.

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;
}

Hinweis: Sie sollten Link href für Bootstrap-CSS vor dem Haupt-CSS hinzufügen, damit Bootstrap Ihren Stil nicht überschreibt.

OldTrain
quelle
3

Das Entfernen outlinebeeinträchtigt die Zugänglichkeit einer Website. Deshalb lasse ich das einfach dort, mache es aber unsichtbar.

a {
   outline: transparent;
}
Chankruze
quelle
1
Wenn Sie die Gliederung transparent machen, wird die Zugänglichkeit Ihrer Website weiterhin beeinträchtigt. Die Idee ist, dass es einen visuellen Indikator dafür liefert, dass ein Element fokussiert ist. Wenn Sie es nicht sichtbar machen, geht dieser Indikator verloren. Weitere Infos hier: Outlininenone.com
Ktbee
1

In meinem Fall war es eine Schaltfläche, und anscheinend ist dies bei Schaltflächen nur in Firefox ein Problem. Lösung gefunden hier :

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

Sein einfacher Versuch unter Code -

a{
outline: medium none !important;
}

Wenn fröhliche Prost! Schönen Tag

Loyola
quelle