Probleme mit Chrome-Autofill-Schriftarten: Wie kann ich Änderungen an der Schriftart von Benutzernamen-/Passwortfeldern verhindern?

Probleme mit der Schriftart: Verhinderung der Änderung der automatisch ausgefüllten Schriftart in Chrome

Beim automatischen Ausfüllen von Benutzernamen- und Passwortfeldern in Chrome unter Windows können Benutzer auf ein merkwürdiges Problem stoßen: Die Schriftart der Eingabe ändert sich. Diese Verschiebung stört die Ausrichtung des Formulars und bereitet den Entwicklern Sorgen.

Das Festlegen einer festen Eingabebreite stellt zwar eine oberflächliche Lösung dar, löst jedoch nicht das Grundproblem. Können wir die Änderung der Schriftart insgesamt effektiv verhindern?

Nachdem wir mit verschiedenen CSS-Techniken experimentiert haben, haben wir eine einfache und effektive Lösung gefunden:

<code class="css">input {
  -webkit-autofill-highlight-color: transparent;
  -webkit-autofill-highlight-box-shadow: none;
  -webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}</code>

Indem wir diese modifizieren Mit unseren browserspezifischen Stilen verhindern wir Inkonsistenzen im Zusammenhang mit dem automatischen Ausfüllen:

• -webkit-autofill-highlight-color: transparent; deaktiviert die Standardhervorhebung.
• -webkit-autofill-highlight-box-shadow: none; entfernt den visuellen Hinweis um das automatisch ausgefüllte Feld.
• -webkit-autofill::first-line { Schriftfamilie : ...; } legt explizit die Schriftart für die erste Zeile fest und steuert so das Erscheinungsbild.

Durch die Beschränkung der CSS-Regel auf ::-webkit-autofill wird sichergestellt, dass sie nur Chrome betrifft unter Windows. Andere Browser und Betriebssysteme sind nicht betroffen.

Durch die Nutzung dieser maßgeschneiderten Stile verhindern wir effektiv die Änderung der Schriftart und behalten gleichzeitig die Funktion zum automatischen Ausfüllen bei.

Das obige ist der detaillierte Inhalt vonProbleme mit Chrome-Autofill-Schriftarten: Wie kann ich Änderungen an der Schriftart von Benutzernamen-/Passwortfeldern verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!