So entfernen Sie den vom Browser automatisch hinzugefügten Standardstil, wenn das Formular automatisch in den Chrome-Browser_Javascript-Fähigkeiten ausgefüllt wird

1. Der Grund für dieses Problem liegt darin, dass beim Schreiben der Konto-Anmeldeseite ein Hintergrundbild zum Eingabeformular hinzugefügt wurde. Beim automatischen Ausfüllen erschien ein hellgelber Hintergrund.

Der Grund dafür ist, dass ich es hastig direkt im Eingabeelement festgelegt habe und das Problem aufgetreten ist. Wenn Sie dieses Symbol also außerhalb des Eingabeformulars platzieren, tritt dieses Problem nicht auf.

2. Wie man mit dem Browser-Standardstil umgeht und ihn vermeidet, der zum automatischen Ausfüllen von Formularen hinzugefügt wird

Das zweite Bild zeigt, dass Chrome nach dem automatischen Ausfüllen des Formulars standardmäßig das private Attribut input:-webkit-autofill zum automatisch ausgefüllten Eingabeformular hinzufügt

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

Wenn ich sehe, dass dieser Code hier hinzugefügt wird, denke ich darüber nach, die Stilüberschreibung zu verwenden, um das Problem zu lösen. Ich kann definitiv !important verwenden, um die Priorität zu erhöhen. Aber es gibt ein Problem, fügen Sie hinzu! Wichtig: Die ursprüngliche Hintergrund- und Schriftfarbe kann nicht überschrieben werden. Mit Ausnahme der Standarddefinition von Chrome für Hintergrundfarben und Hintergrundbilder kann die Farbe nicht verwendet werden

!important erhöht die Priorität. Andere Attribute können es verwenden, um die Priorität zu erhöhen.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

Es gibt zwei Ideen: 1. Fehler durch Patchen beheben. 2. Deaktivieren Sie die integrierte Funktion zum Ausfüllen von Formularen im Browser

Szenario 1: Das Eingabetextfeld hat einen einfarbigen Hintergrund

Lösung:

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

Szenario 2: Das Eingabetextfeld verwendet einen Bildhintergrund

Lösung:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

Stellen Sie zunächst fest, ob es sich um Chrome handelt. Wenn ja, durchlaufen Sie das Element input:-webkit-autofill und implementieren Sie es dann durch Vorgänge wie Wertübernahme, Anhängen und Entfernen. Diese Methode funktioniert nicht! !

Am Ende habe ich das Symbol nicht als Hintergrundbild des Eingabeformulars verwendet, sondern eine zusätzliche Beschriftung geschrieben und das Symbol außerhalb des Formulars platziert.

Idee 2: Deaktivieren Sie die integrierte Funktion zum Ausfüllen von Formularen im Browser

Setzen Sie das Formularattribut autocomplete="off/on", um das automatische Ausfüllen des Formulars zu deaktivieren und sich das Passwort selbst zu merken

Wie im Bild gezeigt: Vor dem automatischen Ausfüllen ist das kleine Symbol dieses Postfachs das Hintergrundbild des Eingabeformulars

Wie im Bild gezeigt: Nach dem Ausfüllen wird das kleine Postfachsymbol durch den Standardstil des Browsers überschrieben

Endlich,

Wenn Sie sich nicht mit dem Hinzufügen des Standardstils befassen möchten, wenn das Formular im Chrome-Browser automatisch ausgefüllt wird, dann platzieren Sie dieses kleine Symbol außerhalb des Formulars, da es sich um ein Eingabefeld handelt

Nur ​​Rand unten. Wenn das Eingabefeld einen Rand hat, müssen Sie möglicherweise einen div-Rahmen verwenden, um so zu tun, als wäre er der Rand des Eingabefelds, und dann dafür sorgen, dass das Eingabefeld keinen Rand hat.

Ein Eingabefeld wie dieses

Mit der oben genannten Methode habe ich meinen Freunden erfolgreich geholfen, das Problem des automatischen Hinzufügens von Standardstilen im Browser zu lösen. Freunde können diesen Artikel mit Zuversicht lesen.