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

Remplacement du remplissage des formulaires du navigateur et de la mise en surbrillance des entrées

Arrière-plan

Un utilisateur est confronté à des difficultés avec le remplissage automatique des formulaires et la mise en surbrillance des entrées dans deux formulaires sur le même page, provoquant un comportement indésirable et des incohérences visuelles.

Solution

Pour Si vous remplacez le style et le remplissage automatique par défaut du navigateur, une méthode efficace consiste à utiliser la pseudo-classe -webkit-autofill. Cela vous permet de contrôler l'apparence des éléments du formulaire lorsqu'ils sont automatiquement remplis par le navigateur.

Empêcher le remplissage automatique

Pour empêcher le remplissage automatique des champs du formulaire , vous pouvez déclencher une ombre d'arrière-plan lors du chargement de la page, faisant ainsi croire au navigateur que le champ est déjà peuplé.

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

Remarque : Cette méthode ne fonctionne plus dans les dernières versions de Chrome.

Suppression de la surbrillance des entrées

Pour supprimer le surlignage jaune de l'arrière-plan lorsque vous vous concentrez sur les champs de saisie, vous pouvez à nouveau utiliser la propriété -webkit-box-shadow pour remplacer la valeur par défaut du navigateur. style.

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

En implémentant ces règles CSS, vous pouvez désactiver efficacement le remplissage automatique du navigateur et contrôler l'apparence visuelle des entrées de votre formulaire, obtenant ainsi une expérience utilisateur cohérente et souhaitée.

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!