Frage Wie umrande (Umrandung) um Text / Eingabefelder entfernen? (Chrome) [duplizieren]


Diese Frage hat hier bereits eine Antwort:

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;
}

enter image description here


970
2017-08-03 13:49


Ursprung


Antworten:


Dieser Rahmen zeigt an, 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;
}

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;
}

1809
2017-08-03 13:52



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;
}

99
2018-02-21 03:43



input:focus {
    outline:none;
}

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


83
2017-08-03 13:52



<input style="border:none" >

Arbeitete gut für mich. Wollte es in html selbst behoben haben ... :)


45
2017-10-08 07:26



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


34
2017-08-03 13:51



Lösung

*:focus {
    outline: 0;
}

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


22
2018-05-23 09:55



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

*:focus {
    outline: none;
}

19
2017-10-10 20:43