Suppression de la couleur d'arrière-plan de la saisie pour la complétion automatique de Chrome ?

Question

Sur un formulaire sur lequel je travaille, Chrome remplit automatiquement les champs de l'adresse électronique et du mot de passe. Cela ne pose aucun problème, mais Chrome modifie la couleur de l'arrière-plan, qui devient jaune pâle.

Le design sur lequel je travaille utilise du texte clair sur un fond sombre, ce qui perturbe l'aspect du formulaire : j'ai des cases jaunes et du texte blanc presque invisible. Une fois que le champ est mis au point, les champs reviennent à la normale.

Est-il possible d'empêcher Chrome de modifier la couleur de ces champs ?

Answer 1

Je sais que c'est stupide, mais je pense que ça marche !

// Change the white to any color ;)
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Answer 2

C'est ainsi que cela a été conçu depuis que ce comportement de coloration provient de WebKit. Il permet à l'utilisateur de comprendre que les données ont été pré-remplies. Bug 1334

Vous pouvez désactiver la complétion automatique en faisant (ou sur le contrôle de formulaire spécifique :

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

Ou vous pouvez changer la couleur de la saisie automatique en faisant :

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Notez qu'un bogue est en cours de suivi pour que cela fonctionne à nouveau : http://code.google.com/p/chromium/issues/detail?id=46543

Il s'agit d'un comportement WebKit.

Answer 3

Une solution de contournement possible pour le moment consiste à définir une ombre intérieure "forte" :

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;
}

Answer 4

En plus de cela :

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

Vous pouvez également ajouter

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

Sinon, lorsque vous cliquez sur l'entrée, la couleur jaune revient. Pour le focus, si vous utilisez bootstrap, la deuxième partie est pour la mise en évidence de la bordure 0 0 8px rgba(82, 168, 236, 0.6) ;

De sorte qu'il ressemblera à n'importe quelle entrée de bootstrap.

Answer 5

Si vous souhaitez conserver la fonctionnalité de saisie automatique, vous pouvez utiliser un peu de jQuery pour supprimer le style de Chrome. J'ai écrit un court article à ce sujet ici : http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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);
    });
});}