Wie umrande (Umrandung) um Text / Eingabefelder entfernen? (Chrome)

Kann jemand erklären, wie man die orange oder blaue Umrandung um Text / Eingabefelder entfernt? Ich denke, es passiert nur in Chrome, um zu zeigen, dass das Eingabefeld aktiv ist. Hier ist das Input-CSS, das ich verwende:

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

Bildbeschreibung hier eingeben

Dieser Rahmen zeigt an, dass das Element fokussiert ist (dh 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; } 

Sie möchten vielleicht eine andere Möglichkeit für Benutzer hinzufügen, um zu wissen, welches Element den Tastaturfokus für die Benutzerfreundlichkeit hat.

Chrome verwendet auch Hervorhebungen für andere Elemente wie DIVs, die als Modale verwendet werden. Um die Hervorhebung dieser und aller anderen Elemente zu verhindern, können Sie Folgendes tun:

 *:focus { outline: none; } 

Die aktuelle Antwort funktionierte bei mir nicht mit Bootstrap 3.1.1. Hier ist, was ich übergehen musste:

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

Das wird es tun. Orange Umriss wird nicht mehr angezeigt.

  

Arbeitete gut für mich. Wollte es in html selbst behoben haben … 🙂

Ich habe die Lösung gefunden.
Ich habe verwendet: outline:none; in der CSS und es scheint zu funktionieren. Danke für die Hilfe trotzdem. 🙂

Lösung

 *:focus { outline: 0; } 

PS: Verwenden Sie outline:0 statt outline:none im Fokus. Es ist gültig und besser zu üben.

diese entfernen orange Rahmen in Chrom von allen und jedem Element, egal was und wo ist es

 *:focus { outline: none; } 

Verwenden Sie die folgende Syntax, um den Rahmen des Textfelds zu entfernen und den hervorgehobenen Rahmen des Browserstils zu entfernen.

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

Ich habe herausgefunden, dass du auch verwenden kannst:

 input:focus{ border: transparent; } 

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 definitiv funktionieren. Orange Umriss wird nicht mehr angezeigt .. Allgemein für alle Tags:

 *:focus { outline: none; } 

Spezifisch für einige Tags, zB: Eingabe-Tag

 input:focus { outline:none; }