wake-up-neo.com

Wie entferne ich den Fokusrand (Umriss) um Text- / Eingabefelder? (Chrom)

Kann jemand erklären, wie man den orangefarbenen oder blauen Rand (Umriss) um Text-/Eingabefelder entfernt? Ich denke, es passiert nur auf Chrome, um zu zeigen, dass das Eingabefeld aktiv ist. Hier ist das Eingabe-CSS, das ich verwende:

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

enter image description here

cssgoogle-chromeinputfocusborder
1161
Joey Morani

Dieser Rand wird verwendet, um anzuzeigen, dass das Element fokussiert ist (d. H. Sie können die Eingabe eingeben oder die Taste mit der Eingabetaste drücken). Sie können es jedoch entfernen:

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

Möglicherweise möchten Sie Benutzern eine andere Möglichkeit hinzufügen, um zu wissen, welches Element aus Gründen der Benutzerfreundlichkeit den Tastaturfokus aufweist.

Chrome wendet die Hervorhebung auch auf andere Elemente an, z. B. DIVs, die als Modals verwendet werden. Um zu verhindern, dass diese und alle anderen Elemente hervorgehoben werden, haben Sie folgende Möglichkeiten:

*:focus {
    outline: none;
}
2096
CEich

Die aktuelle Antwort hat bei mir mit Bootstrap 3.1.1 nicht funktioniert. Folgendes musste ich außer Kraft setzen:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
145
gwintrob
input:focus {
    outline:none;
}

Das wird es tun. Der orange Umriss wird nicht mehr angezeigt.

91
azram19
<input style="border:none" >

Hat bei mir gut funktioniert. Wollte es in HTML selbst behoben haben ... :)

61
Kailas

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

38
Joey Morani

Lösung

*:focus {
    outline: 0;
}

PS: Verwenden Sie outline:0 anstelle von outline:none für den Fokus. Es ist eine gültige und bessere Praxis.

25
Touhid Rahman

dadurch wird der orangefarbene Rahmen in chrome von allen und jedem Element entfernt, egal was und wo es ist

*:focus {
    outline: none;
}
22
nonamehere

Verwenden Sie die folgende Syntax, um den Rand des Textfelds und den hervorgehobenen Rand des Browser-Stils zu entfernen.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
16
Tabish

Einstellen

input:focus{
    outline: 0 none;
}

"! wichtig" ist nur für den Fall. Das ist nicht nötig. [Und jetzt ist es weg. –Ed.]

12
madd

Das wird auf jeden Fall funktionieren. Orange Umriss wird nicht mehr angezeigt. Gemeinsam für alle Tags:

*:focus {
    outline: none;
}

Speziell für bestimmte Tags, z. B .: Eingabe-Tag

input:focus {
   outline:none;
}
11
Prashant Gupta

Ich fand heraus, dass Sie auch verwenden können:

input:focus{
   border: transparent;
}
11
Refilon