Problèmes de police de remplissage automatique de Chrome : comment empêcher les modifications de police du champ de nom d'utilisateur/mot de passe ?

Problèmes de police : empêcher la modification automatique des polices de Chrome

Lors du remplissage automatique des champs de nom d'utilisateur et de mot de passe dans Chrome sous Windows, les utilisateurs peuvent rencontrer un problème curieux : la police de l'entrée change. Ce changement perturbe l'alignement du formulaire, ce qui inquiète les développeurs.

Bien que la définition d'une largeur de saisie fixe fournisse une solution superficielle, elle ne parvient pas à résoudre le problème fondamental. Peut-on empêcher efficacement le changement de police ?

Après avoir expérimenté diverses techniques CSS, nous avons découvert une solution simple et efficace :

<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>

En modifiant ces styles spécifiques au navigateur, nous évitons les incohérences liées au remplissage automatique :

• -webkit-autofill-highlight-color: transparent; désactive la mise en surbrillance par défaut.
• -webkit-autofill-highlight-box-shadow : none; supprime le repère visuel autour du champ rempli automatiquement.
• -webkit-autofill::first-line { font-family : ...; > définit explicitement la police de la première ligne, contrôlant ainsi l'apparence.

Restreindre la règle CSS à ::-webkit-autofill garantit qu'elle n'affecte que Chrome sous Windows. Les autres navigateurs et systèmes d'exploitation ne seront pas affectés.

En tirant parti de ces styles personnalisés, nous empêchons efficacement le changement de police tout en conservant la fonctionnalité de remplissage automatique.

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!