Safari/Chrome-Textinput/Textarea-Glühen entfernen

Question

Ich frage mich, ob es möglich ist, das standardmäßige blaue und gelbe Leuchten zu entfernen, wenn ich auf eine Texteingabe / Textbereich mit CSS klicke?

Answer 1

Bearbeiten (11 Jahre später): Tun Sie dies nicht, es sei denn, Sie bieten einen Fallback an, um anzuzeigen, welches Element aktiv ist. Andernfalls schadet dies der Zugänglichkeit, da es im Wesentlichen die Anzeige beseitigt, die zeigt, welches Element in einem Dokument den Fokus hat. Stellen Sie sich vor, Sie sind ein Tastaturbenutzer und wissen nicht, mit welchem Element Sie interagieren können. Lassen Sie hier die Zugänglichkeit über die Ästhetik siegen.

textarea, select, input, button { outline: none; }

Es wurde jedoch argumentiert, dass die Beibehaltung des Glühens/der Umrandung für die Zugänglichkeit von Vorteil ist, da es den Nutzern helfen kann, zu erkennen, welches Element gerade fokussiert ist.

Sie können auch das Pseudo-Element ':focus' verwenden, um die Eingaben nur dann anzuvisieren, wenn der Benutzer sie ausgewählt hat.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Answer 2

Dieser Effekt kann auch bei Nicht-Eingabeelementen auftreten. Ich habe folgende Lösung gefunden, die allgemeiner ist

:focus {
  outline-color: transparent;
  outline-style: none;
}

---

Aktualisierung: Sie müssen nicht unbedingt die :focus Selektor. Wenn Sie ein Element haben, sagen wir <div id="mydiv">stuff</div> und Sie erhielten das äußere Leuchten auf diesem div-Element, wenden Sie einfach wie gewohnt an:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Answer 3

Zur Größenänderung von Textareas in Webkit-basierten Browsern:

Die Einstellung von max-height und max-width für die Textarea entfernt nicht den visuellen Größenänderungsgriff. Versuchen Sie es:

resize: none;

(und ja, ich stimme der Aussage zu, dass man versuchen sollte, alles zu vermeiden, was die Erwartungen des Benutzers bricht, aber manchmal ist es sinnvoll, z. B. im Kontext einer Webanwendung)

So passen Sie das Aussehen von Webkit-Formularelementen von Grund auf an:

-webkit-appearance: none;

Answer 4

Ich habe diese Erfahrung bei einem div die ein Klick-Ereignis hatte und nach 20 einige Suchen fand ich dieses Snippet, das meinen Tag gerettet.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Damit wird die standardmäßige Hervorhebung von Schaltflächen in mobilen Webkit-Browsern deaktiviert

Answer 5

Dies ist die Lösung für Menschen, die sich um die Zugänglichkeit kümmern .

Bitte, verwenden Sie nicht outline:none; zur Deaktivierung des Fokusumrisses. Sie zerstören die Zugänglichkeit des Webs, wenn Sie dies tun. Es gibt einen zugänglichen Weg, dies zu tun.

Auschecken dieser Artikel die ich geschrieben habe, um zu erklären, wie man den Rand auf zugängliche Weise entfernen kann.

Die Idee ist kurz gesagt, den Umrissrahmen nur dann anzuzeigen, wenn wir einen Tastaturbenutzer erkennen. Sobald ein Benutzer die Maus benutzt, schalten wir den Umriss aus. Als Ergebnis erhalten Sie das Beste von beidem.