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;
}
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;
}
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;
}
input:focus {
outline:none;
}
Das wird es tun. Der orange Umriss wird nicht mehr angezeigt.
<input style="border:none" >
Hat bei mir gut funktioniert. Wollte es in HTML selbst behoben haben ... :)
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. :)
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.
dadurch wird der orangefarbene Rahmen in chrome von allen und jedem Element entfernt, egal was und wo es ist
*:focus {
outline: none;
}
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;
}
Einstellen
input:focus{
outline: 0 none;
}
"! wichtig" ist nur für den Fall. Das ist nicht nötig. [Und jetzt ist es weg. –Ed.]
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;
}
Ich fand heraus, dass Sie auch verwenden können:
input:focus{
border: transparent;
}