Wie entfernt man den Fokusrahmen (Umriss) um Text/Eingabefelder? (Chrome)

Kann jemand erklären, wie man den orangefarbenen oder blauen Rahmen (Umriss) um Text-/Eingabefelder entfernt? Ich denke, es geschieht nur auf Chrome zu zeigen, dass das Eingabefeld aktiv ist. Hier's die Eingabe CSS I'm mit:

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

party-ring
Bearbeitete Frage 1. August 2019 в 4:59
Programmierung
google-chrome focus css input border
3. August 2010 в 1:49
23 Aufrufe
Lösung

Dieser Rahmen wird verwendet, um zu zeigen, dass das Element fokussiert ist (d.h. Sie können die Eingabe machen oder die Schaltfläche mit Enter drücken). Sie können ihn aber auch entfernen:

textarea:focus, input:focus{
    outline: none;
}

Aus Gründen der Benutzerfreundlichkeit sollten Sie vielleicht eine andere Möglichkeit vorsehen, damit die Benutzer wissen, welches Element den Tastaturfokus hat.

Chrome hebt auch andere Elemente hervor, z. B. DIVs, die als Modals verwendet werden. Um die Hervorhebung für diese und alle anderen Elemente zu verhindern, können Sie dies tun:

*:focus {
    outline: none;
}
Chuck Le Butt
Bearbeitete Antwort 5. Januar 2016 в 8:34
Kommentare (16)
 
input:focus {
    outline:none;
}

Das wird reichen. Der orangefarbene Umriss wird nicht mehr angezeigt.

hichris123
Bearbeitete Antwort 14. Dezember 2015 в 12:31
Kommentare (3)

Ich habe die Lösung gefunden.
Ich habe verwendet: outline:none; im CSS und es scheint funktioniert zu haben. Trotzdem vielen Dank für die Hilfe :)

Kommentare (2)