Comment puis-je remplacer le remplissage automatique du navigateur et la mise en surbrillance des entrées par HTML et CSS ?

Remplacer le remplissage automatique des formulaires et la mise en surbrillance des entrées à l'aide de HTML/CSS

Dans le développement Web, la suppression des suggestions de remplissage automatique et de la mise en surbrillance des entrées générées par le navigateur peut s'avérer problématique, en particulier lorsqu'il s'agit de avec plusieurs formulaires sur la même page. Cet article résout les deux problèmes, fournissant une solution pour remplacer le remplissage automatique et supprimer le surlignage jaune de l'arrière-plan.

Remplissage automatique :

Les navigateurs suggèrent automatiquement les informations précédemment saisies dans champs de saisie. Bien que cela soit pratique pour certains utilisateurs, cela peut poser problème lorsque différents formulaires sur la même page ne doivent pas être remplis automatiquement. Pour désactiver le remplissage automatique pour des entrées spécifiques, utilisez l'attribut de saisie semi-automatique :

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

Mise en surbrillance des entrées :

Par défaut, les navigateurs appliquent un fond jaune lorsqu'un champ de saisie est concentré. Ce comportement peut être remplacé à l'aide de CSS. La pseudo-classe :focus cible tout élément actuellement actif. Voici comment supprimer le surlignage jaune à l'aide de CSS :

input:focus {
  background-color: transparent;
}

Notez cependant que cette solution ne fonctionne plus dans les dernières versions de Chrome. Utilisez plutôt le hack suivant :

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px white inset; /* Change the color to your own background color */
  -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
  -webkit-text-fill-color: #333;
} 

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!