Entfernen des blauen Lichts aus einer HTML-Texteingabe bei Auswahl

73

Wie kann ich das blaue Leuchten, das ein ausgewähltes Texteingabefeld umgibt, mit reinem CSS entfernen?

css input

— JSW189
quelle

2

In Google Chrome ist es tatsächlich orange. Nur sagen;)

— wecsam

1

@wecsam: Ich war zuerst wirklich verwirrt, weil ich so an die orangefarbene Kontur von Chrome gewöhnt bin. : P

— Purag

150

Dies sollte es tun:

input:focus {
    outline:none;
}

BEARBEITEN (2015): Wenn Sie für ein breites Publikum entwerfen, denken Sie daran, dass die Gliederung häufig eine wichtige Barrierefreiheit für Benutzer ist, die über Tastaturen navigieren oder ein offensichtlicheres visuelles Feedback benötigen. Wenn Sie die Gliederung entfernen, stellen Sie sicher, dass Sie einen alternativen Fokusstatus definieren, der Ihren Benutzern ein angemessenes visuelles Feedback bietet.

— Purag
quelle

19

Manchmal Kastenschatten: auch keiner ist erforderlich

— Styks

1

beides funktioniert bei mir nicht auf Chrome version 45.0.2454.101 m:(

— J86

Aufgrund der Einschränkung durch Browser als Auswahl> Optionen wird die Eigenschaftsübersicht von shadowDOM behandelt. Sie können versuchen, [This] ( crophq.github.io/chosen ) jQuery Plugin

— TechYogi

14

Ich bevorzuge einen schönen soliden Reset wie:

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

Die Gliederung "Keine" auf Ankertags verhindert schreckliche Fokusumrisse in vielen Android-Browsern.

— wilsonpage
quelle

Umriss für Eingaben ist nur auf Fokus erlaubt

— Anselm

Ich bevorzuge auch diesen. Auch select:focusschien nicht für mich zu arbeiten. Ich sehe überhaupt kein Problem damit. Das :focusist unnötig explizit.

— Taylorcressy

Ich musste hinzufügen, !importantdamit es für mich funktioniert.

— JoeTidee