Comment puis-je remplacer le remplissage automatique et la mise en surbrillance par défaut du formulaire du navigateur avec CSS ?

Remplacer le comportement par défaut du formulaire du navigateur avec CSS

Les navigateurs Web remplissent souvent automatiquement les champs de formulaire et mettent en évidence les champs de saisie avec un fond jaune. Bien que pratique pour certains utilisateurs, cela peut s’avérer indésirable dans certains scénarios. Voyons comment remplacer ces comportements par défaut en HTML et CSS.

Désactiver le remplissage automatique des formulaires

Pour empêcher le remplissage automatique des formulaires, utilisez l'attribut de saisie semi-automatique sur le balise de formulaire. Par exemple :

<form autocomplete="off">
  ...
</form>

Cependant, cet attribut peut ne pas être entièrement pris en charge dans tous les navigateurs.

Supprimer la surbrillance de l'entrée

Pour remplacer la valeur par défaut surlignage jaune pour les champs de saisie, utilisez la règle CSS suivante :

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}

Ce code définit la couleur d'arrière-plan des champs de saisie qui sont rempli automatiquement par le navigateur. En utilisant !important, vous pouvez vous assurer que cette règle a priorité sur tous les autres styles.

Conseil supplémentaire

Si la règle CSS ci-dessus ne fonctionne pas dans les versions plus récentes de Chrome, essayez d'utiliser cette astuce :

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

Cela crée une ombre "forte" autour du champ de saisie, masquant efficacement le jaune fond.

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!