hell
Weiß jemand, wie man den (in den meisten Browsern) gestrichelten Rand eines Dom-Elements deaktiviert oder manipuliert, wenn es den Fokus in einer Tabindex-Reihenfolge hat?
Ich möchte meinen eigenen Stil für ein fokussiertes Element erstellen, aber es wäre großartig, das vorhandene Feature zu verwenden, da es mit tabindex möglich ist, das Keydown-Ereignis an das Dom-Element zu binden.
Erstellen Sie einfach eine CSS-Regel für die gewünschten Elemente outline:none;
Das ist ganz gut, wenn Sie mit der Maus auf das Element klicken, erscheint der Rand nicht mehr, aber wenn Sie über die Tastatur navigieren? Wie heben Sie das Element hervor?
– Körner
5. April 2013 um 11:12 Uhr
@coorasse, wenn Sie es nur für Klicks ausblenden möchten, müssen Sie Javascript verwenden und anrufen .blur() auf dem Element, sobald Sie darauf klicken.
– Gabriele Petrioli
5. April 2013 um 11:38 Uhr
epische kurze Antwort 🙂 +1
– Al-Hanash Moataz
12. August 2020 um 23:58 Uhr
Beachten Sie auch diesen Artikel: sitebase.be/… (wenn Sie für barrierefreies Web entwerfen müssen !! danke @Wim Mostmans)
– hell
16. Juni 2021 um 11:41 Uhr
@helle freut mich das ich helfen konnte 😉
– Wim Mostmans
9. Februar um 10:50 Uhr
CSS-Trick:
:focus { outline: none; }
Es ist wichtig, Usability-Probleme zu berücksichtigen, sobald Sie eine native Barrierefreiheitsfunktion im Browser deaktivieren. Ich schlage vor, einen eigenen Umrissfokus zu erstellen, z. B. die Hintergrundfarbe Gelb.
– blagus
20. März 2018 um 1:53 Uhr
hsyl20
Wenn ich mit Firefox 53.0 die Gliederung mit einer der vorgeschlagenen Lösungen deaktiviere, zeigt Firefox die Standardeinstellung an.
Wenn ich jedoch eine leere Farbe verwende, wird nicht erkannt, dass der Umriss ausgeblendet ist:
input:focus{
outline: 1px solid rgba(255,255,255,1);
}
Mayur bhalgama
input::-moz-focus-inner { border: 0; }
Der klassische Weg wird auf keine Gliederung gesetzt:
outline: none;
Es funktionierte jedoch nicht mehr mit Browsern höherer Versionen oder FireFox. Dieser Trick funktioniert bei mir:
outline: 0px solid transparent;
LOL. Wenn es in Zukunft transparent erkannt wird, ersetzen Sie es einfach durch ein kleines bisschen höheres Transparent:
outline: 0px solid rgba(0,0,0,0.001);
Bei einigen Browsern war es auch ein Boxshadow:
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
Rotamotte
a {
outline: 0;
}
a: hover,
a: active,
a: focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
Mahendra Kulkarni
:focus state – Stellen Sie die Eigentum skizzieren bis 0px durchgehend transparent;
