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

Antworten:

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