Comment empêcher le remplissage automatique de Chrome de modifier les polices des champs de saisie ?

Empêcher les modifications de police induites par le remplissage automatique de Chrome dans les champs de saisie

Les utilisateurs de Chrome sous Windows peuvent rencontrer un désagrément particulier lors du remplissage automatique des formulaires de connexion : la police du nom d'utilisateur ou du mot de passe saisi change lorsque vous survolez un nom d'utilisateur enregistré. Ce problème apparemment mineur peut perturber l'alignement des éléments du formulaire.

Pour éviter ce changement de police, certains peuvent recourir à la définition d'une largeur fixe pour le champ de saisie, mais cela ne fait que masquer le problème plutôt que de le résoudre. Une solution plus souhaitable consiste à éliminer le changement de police à sa source.

Malheureusement, les techniques CSS conventionnelles, telles que le ciblage du champ de saisie avec :-webkit-autofill et la définition de !important pour les propriétés liées aux polices, ont fait leurs preuves. inefficace dans ce cas.

Cependant, une solution de contournement astucieuse a été découverte :

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

Cette règle CSS cible spécifiquement la première ligne de texte rendue dans le champ de saisie rempli automatiquement, garantissant que le texte souhaité la police est appliquée même pendant le remplissage automatique.

En mettant en œuvre cette solution, les développeurs peuvent empêcher le changement de police indésirable provoqué par le mécanisme de remplissage automatique de Chrome, restaurant ainsi l'intégrité de leurs formulaires de connexion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!