Suppression de la couleur d’arrière-plan d’entrée pour la saisie semi-automatique de Chrome?

Sur un formulaire sur lequel je travaille, Chrome remplit automatiquement les champs de courrier électronique et de mot de passe. C’est bien, cependant, Chrome change la couleur d’arrière-plan en une couleur jaune pâle.

Le dessin sur lequel je travaille utilise un texte clair sur un fond sombre, ce qui nuit vraiment à l’aspect de la forme: j’ai des boîtes jaunes et un texte blanc presque invisible. Une fois le champ focalisé, les champs reviennent à la normale.

Est-il possible d’empêcher Chrome de changer la couleur de ces champs?

Cela fonctionne bien, vous pouvez modifier les styles de zone de saisie ainsi que les styles de texte dans la zone de saisie:

Ici, vous pouvez utiliser n’importe quelle couleur, par exemple white , #DDD , rgba(102, 163, 177, 0.45) .

Mais la transparent ne fonctionnera pas ici.

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

De plus, vous pouvez l’utiliser pour modifier la couleur du texte:

 /*Change text in autofill textbox*/ input:-webkit-autofill { -webkit-text-fill-color: yellow !important; } 

Conseil: N’utilisez pas un rayon de flou excessif de plusieurs centaines ou milliers. Cela n’a aucun avantage et pourrait mettre la charge du processeur sur des appareils mobiles plus faibles. (Aussi vrai pour les ombres réelles et extérieures). Pour une boîte de saisie normale de hauteur 20px, le «rayon de flou» de 30px le couvrira parfaitement.

J’ai une meilleure solution.

Définir l’arrière-plan sur une autre couleur comme ci-dessous n’a pas résolu le problème pour moi car j’avais besoin d’un champ de saisie transparent

 -webkit-box-shadow: 0 0 0px 1000px white inset; 

J’ai donc essayé d’autres choses et j’ai trouvé ceci:

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } 

Les solutions précédentes consistant à append une ombre de boîte fonctionnent bien pour les personnes qui ont besoin d’un arrière-plan de couleur unie. L’autre solution consistant à append une transition fonctionne, mais si vous définissez une durée / un délai, cela signifie qu’à un moment donné, il peut apparaître à nouveau.

Ma solution consiste à utiliser des images clés à la place, de manière à toujours afficher les couleurs de votre choix.

 @-webkit-keyframes autofill { to { color: #666; background: transparent; } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } 

C’est ma solution, j’ai utilisé le délai de transition et de transition, donc je peux avoir un arrière-plan transparent sur mes champs de saisie.

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

Cela a été conçu comme ce comportement de coloration a été de WebKit. Il permet à l’utilisateur de comprendre que les données ont été pré-remplies. Bug 1334

Vous pouvez désactiver la saisie semi-automatique en effectuant (ou sur le contrôle de formulaire spécifique:

 
...

Ou vous pouvez changer la couleur de la saisie automatique en procédant comme suit:

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

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

Ceci est un comportement WebKit.

Une solution de contournement possible pour le moment est de définir une ombre interne “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; } 

Essayez ceci pour masquer le style de remplissage automatique

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus { background-color: #FFFFFF !important; color: #555 !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #555555 !important; } 

Toutes les réponses ci-dessus ont fonctionné mais ont eu leurs défauts. Le code ci-dessous est une fusion de deux des réponses ci-dessus qui fonctionne parfaitement sans clignoter.

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: 0 0 0px 1000px #fff inset; } 

TOUPET

 input:-webkit-autofill &, &:hover, &:focus, &:active transition-delay: 9999s transition-property: background-color, color 

Après 2 heures de recherche, il semble que google remplace toujours la couleur jaune mais je cherche le correctif. C’est vrai. cela fonctionnera aussi bien pour le vol stationnaire, le focus, etc. tout ce que vous avez à faire est d’append!

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

cela supprimera complètement le jaune des champs d’entrée

Si vous souhaitez conserver la fonctionnalité de saisie semi-automatique intacte, vous pouvez utiliser un peu de jQuery pour supprimer le style de Chrome. J’ai écrit un petit 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); }); });} 

De plus:

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

Vous pourriez aussi vouloir append

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

En d’autres termes, lorsque vous cliquez sur l’entrée, la couleur jaune reviendra. Pour le focus, si vous utilisez bootstrap, la deuxième partie est pour la mise en surbrillance 0 0 8px rgba (82, 168, 236, 0.6);

De telle sorte que cela ressemblera à n’importe quelle entrée bootstrap.

J’ai eu un problème où je ne pouvais pas utiliser box-shadow parce que j’avais besoin que le champ de saisie soit transparent. C’est un peu un hack mais un CSS pur. Réglez la transition sur une très longue période.

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s; } 

J’ai développé une autre solution utilisant JavaScript sans JQuery. Si vous trouvez cela utile ou décidez de republier ma solution, je vous demande seulement d’inclure mon nom. Prendre plaisir. – Daniel Fairweather

 var documentForms = document.forms; for(i = 0; i < documentForms.length; i++){ for(j = 0; j < documentForms[i].elements.length; j++){ var input = documentForms[i].elements[j]; if(input.type == "text" || input.type == "password" || input.type == null){ var text = input.value; input.focus(); var event = document.createEvent('TextEvent'); event.initTextEvent('textInput', true, true, window, 'a'); input.dispatchEvent(event); input.value = text; input.blur(); } } } 

Ce code est basé sur le fait que Google Chrome supprime le style Webkit dès que du texte supplémentaire est entré. Changer simplement la valeur du champ d'entrée ne suffit pas, Chrome souhaite un événement. En se concentrant sur chaque champ de saisie (texte, mot de passe), nous pouvons envoyer un événement de clavier (la lettre «a»), puis définir la valeur du texte sur son état précédent (le texte rempli automatiquement). N'oubliez pas que ce code s'exécutera dans chaque navigateur et vérifiera chaque champ de saisie de la page Web, ajustez-le en fonction de vos besoins.

Essayez ceci: Identique à la réponse @ Nathan-white ci – dessus avec des ajustements mineurs.

 /* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: all 5000s ease-in-out 0s; transition-property: background-color, color; } 

Pour ceux qui utilisent Compass:

 @each $prefix in -webkit, -moz { @include with-prefix($prefix) { @each $element in input, textarea, select { #{$element}:#{$prefix}-autofill { @include single-box-shadow(0, 0, 0, 1000px, $white, inset); } } } } 

L’ajout d’un délai d’une heure mettrait en pause les modifications CSS sur l’élément d’entrée.
Cela vaut mieux que d’append une animation de transition ou une ombre interne.

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ transition-delay: 3600s; } 

J’ai une solution si vous voulez empêcher le remplissage automatique de Google Chrome mais c’est un peu “machette”, supprimez simplement la classe que Google Chrome ajoute à ces champs d’entrée et définissez la valeur sur “” si vous n’avez pas besoin de montrer stocker les données après le chargement.

 $(document).ready(function () { setTimeout(function () { var data = $("input:-webkit-autofill"); data.each(function (i,obj) { $(obj).removeClass("input:-webkit-autofill"); obj.value = ""; }); },1); }); 

La solution de Daniel Fairweather ( Suppression de la couleur d’arrière-plan pour la saisie semi-automatique de Chrome? ) (Je serais ravi de proposer sa solution, mais il me faut encore 15 rep) fonctionne vraiment bien. Il y a une énorme différence avec la solution la plus relevée: vous pouvez conserver des images de fond! Mais une petite modification (juste vérifier Chrome)

Et vous devez garder à l’esprit que cela fonctionne UNIQUEMENT sur des champs visibles !

Donc, si vous utilisez $ .show () pour votre formulaire, vous devez exécuter ce code après l’événement event ()

Ma solution complète (j’ai un bouton show / hide pour le formulaire de connexion):

  if (!self.isLoginVisible()) { var container = $("#loginpage"); container.stop(); self.isLoginVisible(true); if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { var documentForms = document.forms; for (i = 0; i < documentForms.length; i++) { for (j = 0; j < documentForms[i].elements.length; j++) { var input = documentForms[i].elements[j]; if (input.type == "text" || input.type == "password" || input.type == null) { var text = input.value; input.focus(); var event = document.createEvent('TextEvent'); event.initTextEvent('textInput', true, true, window, 'a'); input.dispatchEvent(event); input.value = text; input.blur(); } } } } } else { self.hideLogon(); } 

Désolé, je préférerais que ce soit un commentaire.

Si vous voulez, je peux mettre un lien vers le site où je l'ai utilisé.

Cela fonctionnera pour l’entrée, la zone de texte et la sélection dans les états normal, en vol stationnaire, en focus et actif.

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

Voici la version SCSS de la solution ci-dessus pour ceux qui travaillent avec SASS / SCSS.

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { &, &:hover, &:focus, &:active { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } } 

Merci Benjamin!

La solution Mootools est un peu plus délicate, car je ne peux pas obtenir de champs en utilisant $('input:-webkit-autofill') , donc ce que j’ai utilisé est le suivant:

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { window.addEvent('load', function() { setTimeout(clearWebkitBg, 20); var elems = getElems(); for (var i = 0; i < elems.length; i++) { $(elems[i]).addEvent('blur', clearWebkitBg); } }); } function clearWebkitBg () { var elems = getElems(); for (var i = 0; i < elems.length; i++) { var oldInput = $(elems[i]); var newInput = new Element('input', { 'name': oldInput.get('name'), 'id': oldInput.get('id'), 'type': oldInput.get('type'), 'class': oldInput.get('class'), 'value': oldInput.get('value') }); var container = oldInput.getParent(); oldInput.destroy(); container.adopt(newInput); } } function getElems() { return ['pass', 'login']; // ids } 

J’abandonne!

Comme il n’ya aucun moyen de changer la couleur de l’entrée avec autocomplete, je décide de les désactiver tous avec jQuery pour les navigateurs Webkit. Comme ça:

 if (/webkit/.test(navigator.userAgent.toLowerCase())) { $('[autocomplete="on"]').each(function() { $(this).attr('autocomplete', 'off'); }); } 

Aucune des solutions n’a fonctionné pour moi, l’ombre encastrée ne fonctionnera pas pour moi car les entrées ont un arrière-plan translucide recouvrant l’arrière-plan de la page.

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

“Est-ce qu’il recherche des identifiants d’entrée, des noms d’entrée? Des identifiants de formulaire? Une action de formulaire?”

Lors de mon expérimentation avec le nom d’utilisateur et les entrées de mot de passe, je n’ai trouvé que deux manières de faire en sorte que Chrome ne puisse pas trouver les champs à remplir automatiquement:

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

Après le chargement de la page, avec JavaScript, vous pouvez soit modifier dynamicment l’ordre des entrées sur la page, soit leur donner dynamicment leur nom et leur identifiant …

Et Chrome ne sait pas ce qu’il a frappé … la saisie semi-automatique est cassée!

Crazy hack, je sais. Mais ça marche pour moi.

Chrome 34.0.1847.116, OSX 10.7.5

Malheureusement, ssortingctement aucune des solutions ci-dessus n’a fonctionné pour moi en 2016 (quelques années après la question)

Voici donc la solution agressive que j’utilise:

 function remake(e){ var val = e.value; var id = e.id; e.outerHTML = e.outerHTML; document.getElementById(id).value = val; return true; }  

Fondamentalement, il supprime l’étiquette tout en enregistrant la valeur et la recrée, puis remet la valeur.

J’ai une solution CSS pure qui utilise des filtres CSS.

 filter: grayscale(100%) brightness(110%); 

Le filtre en niveaux de gris remplace le jaune par du gris, puis la luminosité supprime le gris.

VOIR CODEPEN

Comme mentionné précédemment, l’encart -webkit-box-shadow pour moi fonctionne le mieux.

 /* Code witch overwrites input background-color */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset; } 

Aussi code extrait pour changer la couleur du texte:

 input:-webkit-autofill:first-line { color: #797979; } 

Ce gars a une excellente solution en utilisant JS et fonctionne parfaitement.

C’est une solution complexe pour cette tâche.

 (function($){ if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $('input, select').on('change focus', function (e) { setTimeout(function () { $.each( document.querySelectorAll('*:-webkit-autofill'), function () { var clone = $(this).clone(true, true); $(this).after(clone).remove(); updateActions(); }) }, 300) }).change(); } var updateActions = function(){};// method for update input actions updateActions(); // start on load and on rebuild })(jQuery) 
 *:-webkit-autofill, *:-webkit-autofill:hover, *:-webkit-autofill:focus, *:-webkit-autofill:active { /* use animation hack, if you have hard styled input */ transition: all 5000s ease-in-out 0s; transition-property: background-color, color; /* if input has one color, and didn't have bg-image use shadow */ -webkit-box-shadow: 0 0 0 1000px #fff inset; /* text color */ -webkit-text-fill-color: #fff; /* font weigth */ font-weight: 300!important; } 
    

Simple, il suffit d’append,

  autocomplete="new-password" 

au champ mot de passe.

Les agents utilisateurs de Google Chrome empêchent le développement des CSS les développeurs. Par conséquent, pour modifier l’ autofill interface utilisateur doit utiliser une autre propriété comme celle-ci:

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important; /*use inset box-shadow to cover background-color*/ -webkit-text-fill-color: #ffa400 !important; /*use text fill color to cover font color*/ }