Ich frage mich, ob es möglich ist, das standardmäßige blaue und gelbe Leuchten zu entfernen, wenn ich mit CSS auf eine Texteingabe / einen Textbereich klicke.
css
cross-browser
Alec Smart
quelle
quelle
Antworten:
Es wurde jedoch argumentiert, dass das Beibehalten des Glühens / der Gliederung tatsächlich für die Barrierefreiheit von Vorteil ist, da es Benutzern helfen kann, zu erkennen, welches Element derzeit fokussiert ist.
Sie können das Pseudoelement ': focus' auch verwenden, um die Eingaben nur dann anzuvisieren, wenn der Benutzer sie ausgewählt hat.
Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
quelle
Dieser Effekt kann auch bei nicht eingegebenen Elementen auftreten. Ich habe die folgenden Arbeiten als allgemeinere Lösung gefunden
Update: Möglicherweise müssen Sie den
:focus
Selektor nicht verwenden. Wenn Sie beispielsweise ein Element haben<div id="mydiv">stuff</div>
und das äußere Leuchten dieses div-Elements erhalten haben, wenden Sie es einfach wie gewohnt an:quelle
<button>
Elemente, die nicht besonders vom Glow-on-Focus profitieren, da Sie meistens sowieso darauf klicken.45.0.2454.101 m
:focus
für den Selektor verwendet, sondern nur dasoutline-color
undoutline-style
auf das CSS meines Divs gesetzt.Informationen zur Größenänderung von Textbereichen in Webkit-basierten Browsern:
Durch Einstellen der maximalen Höhe und der maximalen Breite im Textbereich wird der visuelle Größenänderungsgriff nicht entfernt. Versuchen:
(und ja, ich stimme zu "versuche, alles zu vermeiden, was die Erwartungen des Benutzers verletzt", aber manchmal macht es Sinn, dh im Kontext einer Webanwendung)
So passen Sie das Erscheinungsbild von Webkit-Formularelementen von Grund auf an:
quelle
none
,both
,horizontal
,vertical
, undinherit
.Carl W :
Ich werde das erklären:
:focus
bedeutet, dass die fokussierten Elemente formatiert werden. Also stylen wir die Elemente im Fokus.outline-color: transparent;
bedeutet, dass das blaue Leuchten transparent ist.outline-style: none;
macht das gleiche.quelle
Ich habe dies bei einem
div
Klickereignis erlebt und nach 20 Suchanfragen habe ich dieses Snippet gefunden, das meinen Tag gerettet hat.Dadurch wird die Hervorhebung der Standardschaltfläche in mobilen Webkit-Browsern deaktiviert
quelle
Dies ist die Lösung für Personen, die Wert auf Barrierefreiheit legen .
Bitte nicht
outline:none;
zum Deaktivieren der Fokuskontur verwenden. Sie beenden die Zugänglichkeit des Webs, wenn Sie dies tun. Es gibt einen zugänglichen Weg, dies zu tun.In diesem Artikel , den ich geschrieben habe, erfahren Sie, wie Sie den Rand auf zugängliche Weise entfernen.
Kurz gesagt, die Idee ist, den Umrissrand nur dann anzuzeigen, wenn wir einen Tastaturbenutzer erkennen. Sobald ein Benutzer seine Maus benutzt, deaktivieren wir die Gliederung. Als Ergebnis erhalten Sie das Beste von beiden.
quelle
Wenn Sie das Leuchten von Schaltflächen in Bootstrap entfernen möchten (was meiner Meinung nach nicht unbedingt eine schlechte UX ist), benötigen Sie den folgenden Code:
quelle
.btn:active:focus
war notwendig, um das Leuchten zu entfernen, während der Knopf tatsächlich gedrückt wurde.Diese Lösung hat bei mir funktioniert.
quelle
Manchmal passiert es, dass die Schaltflächen auch unten verwendet werden, um die äußere Linie zu entfernen
quelle
quelle
Ich fand es hilfreich, den Umriss auf einer Eingabetaste vom Typ "Schiebetür" zu entfernen, da der Umriss nicht die rechte "Kappe" des Schiebetürbilds abdeckt, wodurch der Fokuszustand ein wenig wackelig aussieht.
quelle
Ich musste diesen Effekt nur aus meinen Texteingabefeldern entfernen, und ich konnte die anderen Techniken nicht richtig einsetzen, aber das funktioniert bei mir.
Getestet in Firefox und in Chrome.
quelle
Sicher! Sie können den blauen Rand auch mit * aus allen HTML-Elementen entfernen
Und
quelle