Comment supprimer le style par défaut ajouté automatiquement par le navigateur lorsque le formulaire est automatiquement rempli dans les compétences Chrome browser_javascript

1. La raison de ce problème est que lors de la rédaction de la page de connexion au compte, une image de fond a été ajoutée au formulaire de saisie. Lors de son remplissage automatique, un fond jaune clair est apparu.

La raison en est que je l'ai défini à la hâte directement dans l'élément d'entrée, et le problème est survenu. Donc si vous placez cette icône en dehors du formulaire de saisie, ce problème ne se produira pas.

2. Comment gérer et éviter le style par défaut du navigateur qui sera ajouté au remplissage automatique du formulaire

La deuxième image est qu'une fois le formulaire rempli automatiquement, Chrome ajoutera l'attribut privé input:-webkit-autofill au formulaire de saisie automatiquement rempli par défaut

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

Quand je verrai ce code ajouté ici, je penserai à utiliser le remplacement de style pour le résoudre. Je peux certainement utiliser !important pour augmenter la priorité. Mais il y a un problème, ajoutez ! important ne peut pas écraser l'arrière-plan d'origine et la couleur de la police, à l'exception de la définition par défaut de Chrome de la couleur d'arrière-plan, des images d'arrière-plan, la couleur ne peut pas être utilisée

.

!important augmente la priorité. D'autres attributs peuvent l'utiliser pour augmenter la priorité.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

Il y a deux idées. 1. Corriger les bugs via des correctifs. 2. Désactivez la fonction de remplissage de formulaire intégrée au navigateur

Scénario 1 : La zone de texte de saisie a un arrière-plan de couleur unie

Solution :

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

Scénario 2 : La zone de texte de saisie utilise un arrière-plan d'image

Solution :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

Déterminez d'abord s'il s'agit de chrome. Si tel est le cas, parcourez l'élément input:-webkit-autofill, puis implémentez-le via des opérations telles que la prise de valeur, l'ajout et la suppression. Cette méthode ne fonctionne pas ! !

En fin de compte, je n'ai pas utilisé l'icône comme image d'arrière-plan du formulaire de saisie, j'ai plutôt écrit une étiquette supplémentaire et pris l'icône en dehors du formulaire.

Idée 2 : Désactivez la fonction de remplissage de formulaire intégrée au navigateur

Définissez l'attribut du formulaire autocomplete="off/on" pour désactiver le remplissage automatique du formulaire et mémorisez vous-même le mot de passe

Comme le montre l'image : Avant le remplissage automatique, la petite icône de cette boîte mail est l'image de fond du formulaire de saisie

Comme le montre l'image : Après le remplissage, la petite icône de la boîte aux lettres est écrasée par le style par défaut du navigateur

Enfin,

Si vous ne souhaitez pas ajouter le style par défaut lorsque le formulaire est automatiquement rempli dans le navigateur Chrome, placez cette petite icône en dehors du formulaire, car il s'agit d'une zone de saisie

.

Bordure inférieure uniquement. Si la zone de saisie a une bordure, vous devrez peut-être utiliser une bordure div pour faire semblant d'être la bordure de la zone de saisie, puis faire en sorte que la zone de saisie n'ait pas de bordure.

Une zone de saisie comme celle-ci

Grâce à la méthode ci-dessus, j'ai réussi à aider mes amis à résoudre le problème de l'ajout automatique de styles par défaut dans le navigateur. Les amis peuvent se référer à cet article en toute confiance.