Remplissage automatique du formulaire Google Chrome et son fond jaune


245

J'ai un problème de conception avec Google Chrome et sa fonction de remplissage automatique de formulaire. Si Chrome se souvient d'un identifiant / mot de passe, il change une couleur d'arrière-plan en jaune.

Voici quelques captures d'écran:

texte alternatif texte alternatif

Comment supprimer cet arrière-plan ou simplement désactiver cette saisie automatique?


4
J'aimerais aussi voir s'il y a une réponse à cela.
Kyle

12
Pour le style, cette couleur peut sérieusement avec des éléments de conception, comme le contour des balises d'entrée dans Chrome également, je voudrais plus changer la couleur que la désactiver.
Kyle

3
Google semble reconnaître ce problème dans une certaine mesure. Voir code.google.com/p/chromium/issues/detail?id=46543
MitMaro

1
Pour désactiver la saisie semi-automatique, vous pouvez ajouter la saisie semi-automatique = "off" à votre élément d'entrée, par exemple <input type = "text" id = "input" autocomplete = "off">
joe_young

1
Juste une information supplémentaire: j'ai été mordu par cela quand j'ai un champ de mot de passe. J'ai automatiquement mis mes champs en surbrillance (jaune) et rempli d'une valeur étrange. Et j'ai trouvé la solution ici: zigpress.com/2014/11/22/stop-chrome-messing-forms ... La solution est dans la section qui dit "Désactiver le remplissage automatique de Google Chrome" ... ajoutez des champs cachés.
Cokorda Raka

Réponses:


282

Changez "blanc" en n'importe quelle couleur que vous voulez.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

4
bonne idée. Je m'en tiendrai à 50 ou 100 chaque fois que cela sera suffisant (boîtes de saisie de taille normale) pour éviter les performances potentielles sur les appareils les plus faibles. (Et pas besoin de px après 0)
Frank Nocke

4
J'adore ce hack! Grande pensée ... Tout le monde supprime la saisie automatique. Je voulais garder la fonction de remplissage automatique pour simplement me débarrasser du laid jaune.
Travis

1
Ne fonctionne pas si vous avez des images d'arrière-plan derrière votre champ de saisie, remplissez simplement toute la zone de blanc. J'ai essayé toutes les solutions sur cette page, y compris celles basées sur jquery et elles n'ont pas fonctionné pour moi, à la fin j'ai dû ajouter autocomplete = "off" au champ.
Myke Black

19
Pour styliser également l'utilisation de la couleur du texte -webkit-text-fill-color- voir cette question
Erwin Wessels

2
il y a une erreur, je n'ai peut-être pas changé la syntaxe mais cela fonctionne maintenant:box-shadow: inset 0 0 0 1000px white !important;
Muhammad Umer

49

Si vous voulez des champs de saisie transparents, vous pouvez utiliser la transition et le délai de transition.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

La meilleure solution pour moi car les valeurs de couleur RGBA ne fonctionnaient pas -webkit-box-shadow. Élimine également la nécessité de donner des valeurs de couleur pour cette déclaration: les valeurs par défaut continueront de s'appliquer.
Sébastien

encore mieux est d'utiliser le délai de transition au lieu de sa durée, pour ne pas avoir de mélange de couleurs du tout
antoine129

bon mais pour une raison quelconque, j'ai dû déplacer cette règle à la fin du fichier, sinon cela n'a pas fonctionné
Igor Mizak

C'est ce que je cherchais! Je vous remercie!
Akhmedzianov Danilian

43

Solution ici :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Cela a fonctionné alors que la réponse la plus élevée n'a pas fonctionné. Cependant je pense que je n'essaierai pas de changer le comportement depuis a). c'est du javascript donc il y a une seconde entre ça marche et ça ne marche pas (jusqu'à ce que le js se charge) et b). cela peut confondre l'utilisateur Chrome habitué au comportement par défaut.
TK123

3
Mon chrome réapplique juste le jaune à la nouvelle entrée :(
Dustin Silk

S'il vous plait, ne le faites pas. Cela ne fonctionnera avec aucun framework JS, uniquement pour les sites Web statiques.
Akhmedzianov Danilian

26

Dans Firefox, vous pouvez désactiver toutes les saisies automatiques sur un formulaire en utilisant l'attribut autocomplete = "off / on". De même, la saisie semi-automatique des éléments individuels peut être définie à l'aide du même attribut.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Vous pouvez tester cela dans Chrome comme cela devrait fonctionner.


7
Le tournage autocomplete="off"n'est pas accessible de nos jours.
João

4
Malheureusement, cette solution ne fonctionne plus dans Chrome.
henrywright

1
Ceci est fortement déconseillé car vous ne résolvez pas vraiment le problème réel ici. au lieu de cela, vous en créez un nouveau en frustrant les utilisateurs car ils doivent taper manuellement leurs informations de connexion (vraisemblablement) (s'ils se souviennent même de ce qu'ils étaient)
xorinzor

25

Si vous souhaitez conserver la saisie automatique, ainsi que toutes les données, les gestionnaires attachés et les fonctionnalités attachées à vos éléments d'entrée, essayez ce script:

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

Il interroge jusqu'à ce qu'il trouve des éléments de remplissage automatique, les clone, y compris les données et les événements, puis les insère dans le DOM au même emplacement et supprime l'original. Il arrête d'interroger une fois qu'il a trouvé un clone, car le remplissage automatique prend parfois une seconde après le chargement de la page. Il s'agit d'une variante d'un exemple de code précédent, mais plus robuste et conserve autant de fonctionnalités intactes que possible.

(Fonctionnement confirmé dans Chrome, Firefox et IE 8.)


6
C'est la seule solution que j'ai trouvée fonctionnelle, SANS désactiver la saisie semi-automatique.
Xeroxoid

il n'est peut-être pas nécessaire de définir des intervalles car les remplissages automatiques de chrome sur window.load?
Timo Huovinen

2
Fonctionne sans supprimer la saisie automatique, une solution bien meilleure que celles avec des millions de votes positifs.
Ally

Les autres solutions n'ont pas fonctionné pour moi, même la plus élevée, mais celle-ci a fonctionné. Le problème, qui est l'opposé de ce que @Timo a dit ci-dessus, est que Chrome ne se remplit pas automatiquement à window.load. Même si cela a fonctionné, un problème est que s'il n'y a pas d'éléments -webkit-autofill, la boucle s'exécute en continu. Vous n'avez même pas besoin d'un intervalle pour que cela fonctionne. Définissez simplement un délai d'attente avec peut-être un retard de 50 millisecondes et cela fonctionnera bien.
Gavin

16

Le CSS suivant supprime la couleur d'arrière-plan jaune et la remplace par une couleur d'arrière-plan de votre choix. Il ne désactive pas le remplissage automatique et ne nécessite aucun piratage jQuery ou Javascript.

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: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Solution copiée à partir de: remplacer le remplissage du formulaire du navigateur et la mise en surbrillance des entrées avec HTML / CSS


Ne joue pas bien si le champ a plusieurs ombres appliquées.
Streching ma compétence

6

A fonctionné pour moi, seul le changement CSS requis.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

vous pouvez mettre n'importe quelle couleur à la place de #ffffff .


3

Un peu hacky mais fonctionne parfaitement pour moi

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

3

Une combinaison de réponses a fonctionné pour moi

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

C'est le seul exemple qui a fonctionné pour moi avec le texte et l'arrière-plan sur la version Chrome 53.0.2785.116 m
pleshy

2

Voici la version MooTools de Jason. Le corrige également dans Safari.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

1
N'utilisez pas ce script. S'il n'y a pas d'éléments remplis automatiquement, la boucle s'exécutera en continu à 20 millisecondes. Un intervalle n'est pas nécessaire. Définissez un délai d'expiration après window.load à environ 50 millisecondes et ce sera beaucoup de temps pour supprimer le style.
Gavin

2

Cela résout le problème sur Safari et Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

C'est ce qui fonctionne pour moi. Mais le BUG est toujours là, et comme on peut le voir, aucune date à fixer. code.google.com/p/chromium/issues/detail?id=46543#c22
Eduardo M

Vous n'effacez jamais votre intervalle. C'est du code bâclé, ne l'utilisez pas.
Gavin

1
En fait, cela ne fonctionne pas. Je ne peux rien taper dans les entrées car elles sont constamment clonées. presque là ...
Dustin Silk

essayez ceci var id = window.setInterval (function () {$ ('input: -webkit-autofill'). each (function () {var clone = $ (this) .clone (true, true); $ (this) .after (clone) .remove ();});}, 20); $ ('input: -webkit-autofill'). focus (function () {window.clearInterval (id);});
Dustin Silk

2

Cela m'a aidé, une version CSS uniquement.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

où le blanc peut être de n'importe quelle couleur.


2

J'utilise ça,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

1

Dans votre balise, insérez simplement cette petite ligne de code.

autocomplete="off"

Cependant, ne placez pas cela dans le champ nom d'utilisateur / email / idname car si vous cherchez toujours à utiliser la saisie semi-automatique, cela le désactivera pour ce champ. Mais j'ai trouvé un moyen de contourner cela, placez simplement le code dans votre balise de saisie de mot de passe parce que vous ne complétez jamais automatiquement les mots de passe. Ce correctif devrait supprimer la force de couleur, la capacité de saisie semi-automatique du matinain dans votre champ de messagerie / nom d'utilisateur et vous permet d'éviter les hacks encombrants comme Jquery ou javascript.


1

Si vous voulez vous en débarrasser complètement, j'ai ajusté le code dans les réponses précédentes pour qu'il fonctionne aussi en survol, actif et concentré:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

1
ajouter un !importantest nécessaire mais merci, ça m'a beaucoup aidé.
Polochon

0

Voici une solution Mootools faisant la même chose qu'Alessandro - remplace chaque entrée affectée par une nouvelle.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

0

Qu'en est-il de cette solution:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Il désactive la saisie semi-automatique et le remplissage automatique (de sorte que les arrière-plans jaunes disparaissent), attend 100 millisecondes, puis rétablit la fonctionnalité de saisie semi-automatique sans remplissage automatique.

Si vous avez des entrées qui doivent être remplies automatiquement, donnez-leur la auto-complete-onclasse css.


0

Aucune des solutions n'a fonctionné pour moi, les entrées de nom d'utilisateur et de mot de passe étaient toujours renseignées et sur fond jaune.

Je me suis donc demandé: "Comment Chrome détermine-t-il ce qui doit être rempli automatiquement sur une page donnée?"

"Cherche-t-il les ID d'entrée, les noms d'entrée? ID de formulaire? Action de formulaire?"

Grâce à mon expérimentation avec le nom d'utilisateur et les entrées de mot de passe, je n'ai trouvé que deux façons qui empêcheraient Chrome de trouver les champs qui devraient être remplis automatiquement:

1) Placez la saisie du mot de passe avant la saisie de texte. 2) Donnez-leur le même nom et identifiant ... ou aucun nom et identifiant.

Après le chargement de la page, avec javascript, vous pouvez soit changer l'ordre des entrées sur la page, soit leur donner dynamiquement leur nom et leur identifiant ...

Et Chrome ne sait pas ce qui l'a frappé ... la saisie semi-automatique reste désactivée.

Hack fou, je sais. Mais ça marche pour moi.

Chrome 34.0.1847.116, OSX 10.7.5


0

La seule façon qui fonctionne pour moi était: (jQuery requis)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

0

J'ai résolu ce problème pour un champ de mot de passe que j'ai comme ceci:

Définissez le type d'entrée sur texte au lieu de mot de passe

Supprimer la valeur de texte saisie avec jQuery

Convertissez le type d'entrée en mot de passe avec jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Ne fonctionne pas dans Chrome. Dès que le champ devient type = mot de passe, Chrome le remplit
mowgli

0

Une mise à jour de la solution Arjans. Lorsque vous essayez de modifier les valeurs, cela ne vous laissera pas. Cela fonctionne bien pour moi. Lorsque vous vous concentrez sur une entrée, elle devient jaune. c'est assez proche.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

0

Essayez ce code:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">


0

la réponse de namrouti tarifée est correcte. Mais l'arrière-plan devient toujours jaune lorsque l'entrée est sélectionnée . L'ajout !importantcorrige le problème. Si vous voulez aussi textareaet selectavec le même comportement, ajoutez simplementtextarea:-webkit-autofill, select:-webkit-autofill

Entrée uniquement

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

entrée, sélection, zone de texte

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

0

L'ajout autocomplete="off"ne va pas le couper.

Remplacez l'attribut de type d'entrée par type="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.

J'espère que cela vous fera gagner du temps.


0

Si vous voulez éviter le scintillement jaune jusqu'à ce que votre CSS soit appliqué, appliquez une transition sur ce mauvais garçon comme ceci:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

-1

La solution finale:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});


-5

Je viens de me retrouver avec la même question. Cela fonctionne pour moi:

form :focus {
  outline: none;
}

3
c'est le contour sur la boîte lorsque vous cliquez dessus, pas la couleur d'arrière-plan de l'entrée remplie automatiquement
Claire
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.