Wie kann ich verhindern, dass Chromes automatisches Ausfüllen die Schriftarten von Eingabefeldern ändert?

Verhindern der durch Chrome automatisch ausgefüllten Schriftartänderungen in Eingabefeldern

Chrome-Benutzer unter Windows können beim automatischen Ausfüllen von Anmeldeformularen auf ein besonderes Ärgernis stoßen: die Schriftart der Benutzernamen- oder Passworteingabe ändert sich, wenn Sie mit der Maus über einen gespeicherten Benutzernamen fahren. Dieses scheinbar geringfügige Problem kann die Ausrichtung der Formularelemente stören.

Um diese Schriftartänderung zu verhindern, greifen einige möglicherweise darauf zurück, eine feste Breite für das Eingabefeld festzulegen, aber das verschleiert das Problem nur, anstatt es zu beheben. Eine wünschenswertere Lösung besteht darin, die Schriftartänderung an ihrer Quelle zu beseitigen.

Leider haben sich herkömmliche CSS-Techniken bewährt, wie z. B. das gezielte Ansprechen des Eingabefelds mit :-webkit-autofill und das Festlegen von !important für schriftartbezogene Eigenschaften in diesem Fall unwirksam.

Es wurde jedoch eine clevere Problemumgehung entdeckt:

input {
  &:-webkit-autofill::first-line,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    font-family: Times, "Times New Roman", serif !important;
  }
}

Diese CSS-Regel zielt speziell auf die erste Textzeile ab, die im automatisch ausgefüllten Eingabefeld gerendert wird, und stellt so sicher, dass das gewünschte Die Schriftart wird auch beim automatischen Ausfüllen angewendet.

Durch die Implementierung dieser Lösung können Entwickler die unerwünschte Schriftartänderung verhindern, die durch den Autofill-Mechanismus von Chrome verursacht wird, und so die Integrität ihrer Anmeldeformulare wiederherstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Chromes automatisches Ausfüllen die Schriftarten von Eingabefeldern ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!