Chromes Herausforderung beim automatischen Ausfüllen von Schriftarten meistern

Wenn Sie auf die Funktion zum automatischen Ausfüllen von Chrome unter Windows stoßen, kann es sein, dass Sie auf ein lästiges Problem beim Ändern von Schriftarten stoßen. Wenn Sie mit der Maus über gespeicherte Benutzernamen fahren, ändern sich Schriftgröße und -stil, wodurch die Ausrichtung Ihres Formulars gestört wird. Während Sie der Eingabe eine feste Breite zuweisen können, um dieses Problem zu mildern, besteht eine effektivere Lösung darin, die Änderung der Schriftart insgesamt zu verhindern.

Um dies zu erreichen, können Sie CSS-Regeln verwenden, die speziell auf das :-webkit-autofill abzielen Pseudoklasse. Diese Pseudoklasse gilt für Bereiche des Formulars, die automatisch vom Passwort-Manager von Chrome ausgefüllt werden. Durch Anwenden der Eigenschaft „wichtig“ auf die Eigenschaft „Schriftfamilie“ innerhalb dieser Regel können Sie das Standardverhalten von Chrome überschreiben und Ihre gewünschten Schriftarteinstellungen beibehalten.

Hier ist ein Beispiel, wie Sie dies in SCSS implementieren können:

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

Alternativ können Sie auch nur die folgende Regel benötigen:

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

Das Pseudoelement ::first-line zielt auf die erste Zeile der Eingabe ab, in der normalerweise das automatische Ausfüllen stattfindet.

Durch die Einbindung dieser CSS-Regeln können Sie das automatische Ausfüllen von Chrome effektiv verhindern Änderung der Schriftart, wobei die Ausrichtung und Ästhetik Ihres Anmeldeformulars erhalten bleibt.