Surmonter le défi de changement de police de remplissage automatique de Chrome

Lorsque vous rencontrez la fonctionnalité de remplissage automatique de Chrome sous Windows, vous pouvez rencontrer un problème ennuyeux de changement de police. En survolant les noms d'utilisateur enregistrés, la taille et le style de la police changent, perturbant l'alignement de votre formulaire. Bien que vous puissiez appliquer une largeur fixe à l'entrée pour atténuer ce problème, une solution plus efficace consiste à empêcher complètement le changement de police.

Pour ce faire, vous pouvez utiliser des règles CSS ciblant spécifiquement le :-webkit-autofill pseudo-classe. Cette pseudo-classe s'applique aux régions du formulaire automatiquement remplies par le gestionnaire de mots de passe de Chrome. En appliquant important à la propriété de famille de polices dans cette règle, vous pouvez remplacer le comportement par défaut de Chrome et conserver les paramètres de police souhaités.

Voici un exemple de la façon dont vous pouvez implémenter cela dans SCSS :

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

Vous pouvez également exiger uniquement la règle suivante :

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

Le pseudo-élément ::first-line cible la première ligne de l'entrée, qui est généralement l'endroit où le remplissage automatique a lieu.

En incorporant ces règles CSS, vous pouvez empêcher efficacement le remplissage automatique de Chrome changement de police, préservant l'alignement et l'esthétique de votre formulaire de connexion.