it-swarm.com.de

Wie entferne ich den Standard-Chrome-Stil für die Auswahl der Eingabe?

Wie entferne ich den Standardrahmen des gelben Kästchens von "Selected" und wähle Felder in Chrome oder einem Browser wie Safari aus? Wie entferne ich den Standardbrowser-Auswahlrahmen?

39
monk
-webkit-appearance: none;

und fügen Sie Ihren eigenen Stil hinzu

74
Sowmya
textarea, input { outline: none; }

über https://stackoverflow.com/a/935572/1036298

30
Nithin Emmanuel

Mixin für weniger

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}
9
Pesulap

Fügen Sie in Ihrem CSS Folgendes hinzu:

input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }

Nur für Chrome! :)

verwenden Sie einfachen Code, um den Standardbrowser-Stil für Gliederung zu entfernen

input { outline: none; }
4

eingabe: -webkit-autofill { Hintergrund: #fff! wichtig; }

2
supersaiyan

Wenn Sie sich eine Eingabe mit einem Nummerntyp ansehen, werden Sie die Drehknöpfe (hoch/runter) auf der rechten Seite des Eingabefelds bemerken. Diese Drehfelder sind nicht immer wünschenswert. Daher wird im folgenden Code eine solche Formatierung entfernt, um eine Eingabe zu rendern, die der Eingabe eines Texttyps ähnelt.

enter image description here

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}
1
Keith Gulbro

Sprichst du davon, wenn du auf ein Eingabefeld klickst, anstatt nur darüber zu schweben? Das hat es für mich behoben:

input:focus {
   outline: none;
   border: specify yours;
}
0
Adam

Vor dem Anwenden der Eigenschaft box-shadow: none Before Applying Property box-shadow : none

Nach dem Anwenden der Eigenschaft box-shadow: none After Applying Property box-shadow : none

Dies ist die einfachste Lösung und hat bei mir funktioniert

input {
   box-shadow : none;  
}
0
Prajwal