Supprimer 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 e-mail et mot de passe. C'est bien, cependant, Chrome change la couleur d'arrière-plan en une couleur jaune pâle.

La conception sur laquelle je travaille utilise du texte clair sur un fond sombre, donc cela gâche vraiment l'apparence du formulaire - j'ai des boîtes jaunes nettes et du 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 très bien, vous pouvez modifier les styles de zone de saisie ainsi que les styles de texte à l'intérieur de la zone de saisie:

Ici , vous pouvez utiliser toutes les couleurs , par exemple white, #DDD, rgba(102, 163, 177, 0.45).

Mais transparentne fonctionnera pas ici.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

De plus, vous pouvez utiliser ceci pour changer 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 par centaines ou en milliers. Cela n'a aucun avantage et pourrait mettre la charge du processeur sur les appareils mobiles plus faibles. (Également vrai pour les ombres extérieures réelles). Pour une boîte d'entrée normale d'une hauteur de 20 pixels, un «rayon de flou» de 30 pixels le couvrira parfaitement.

Les solutions précédentes d'ajout d'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 à ajouter une transition fonctionne, mais le fait de devoir définir une durée / un délai signifie qu'à un moment donné, elle peut s'afficher à nouveau.

Ma solution consiste à utiliser des images clés à la place, de cette façon, elles afficheront toujours les couleurs de votre choix.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Exemple de Codepen: https://codepen.io/-Steve-/pen/dwgxPB

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

C'est ma solution, j'ai utilisé la transition et le délai de transition, donc je peux avoir un fond 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 car 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 saisie semi-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 procédant comme suit:

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

Remarque, un bug est suivi pour que cela fonctionne à nouveau: http://code.google.com/p/chromium/issues/detail?id=46543

Il s'agit d'un comportement WebKit.

Une solution de contournement possible pour le moment est de 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;
}  

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 également pour le vol stationnaire, la concentration, etc. tout ce que vous avez à faire est d'ajouter!

 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 de saisie

L'ajout d'un délai d'une heure mettrait en pause toutes les modifications CSS sur l'élément d'entrée.
C'est mieux que d'ajouter une animation de transition ou une ombre intérieure.

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

De plus:

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 reviendra. Pour le focus, si vous utilisez le bootstrap, la deuxième partie est pour la bordure surlignant 0 0 8px rgba (82, 168, 236, 0.6);

Telle qu'elle 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 du CSS pur. Réglez la transition sur une durée très longue.

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

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

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

J'ai développé une autre solution en utilisant JavaScript sans JQuery. Si vous trouvez cela utile ou décidez de republier ma solution, je vous demande seulement d'indiquer 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 de saisie ne suffit pas, Chrome veut un événement. En nous concentrant sur chaque champ de saisie (texte, mot de passe), nous pouvons envoyer un événement clavier (la lettre «a»), puis définir la valeur du texte à son état précédent (le texte rempli automatiquement). Gardez à l'esprit que ce code s'exécutera dans tous les navigateurs et vérifiera chaque champ de saisie de la page Web, ajustez-le en fonction de vos besoins.

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 le gris, puis la luminosité supprime le gris.

VOIR CODEPEN

Cela fonctionnera pour l'entrée, la zone de texte et la sélection dans les états normal, survol, 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;
    }
}

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

J'abandonne!

Puisqu'il n'y a aucun moyen de changer la couleur de l'entrée avec la saisie semi-automatique, 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');
    });
}

J'ai une solution si vous voulez empêcher la saisie automatique de Google Chrome, mais c'est un peu "machette", supprimez simplement la classe que Google Chrome ajoute à ces champs de saisie et définissez la valeur sur "" si vous n'avez pas besoin d'afficher 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 d'entrée pour la saisie semi-automatique de Chrome? ) (J'adorerais voter pour sa solution, mais j'ai encore besoin de 15 répétitions) fonctionne vraiment bien. Il y a une énorme différence avec la solution la plus votée: vous pouvez conserver les images d'arrière-plan! Mais une petite modification (juste une vérification Chrome)

Et vous devez garder à l'esprit, cela ne fonctionne que sur les champs visibles !

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

Ma solution complète (j'ai un bouton afficher / masquer 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é encore, je préférerais que ce soit un commentaire.

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

et cela a fonctionné pour moi (testé Chrome 76)

input:-internal-autofill-selected {
    background-color: transparent;
}

J'ai essayé presque toutes les solutions ci-dessus. Rien ne fonctionne pour moi. Enfin travaillé avec cette solution. J'espère que quelqu'un l'aidera.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

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
}

Aucune des solutions n'a fonctionné pour moi, l'ombre incrustée ne fonctionnera pas pour moi car les entrées ont un fond translucide superposé sur le fond 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?"

"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) Mettez 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 modifier dynamiquement 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 est interrompue!

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

Chrome 34.0.1847.116, OSX 10.7.5

Malheureusement, strictement 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;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

Fondamentalement, il supprime la balise lors de l'enregistrement de la valeur, la recrée, puis remet la valeur.

j'utilise cela. travaille pour moi. retirer le fond jaune du champ.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

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

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

Également un extrait de code pour changer la couleur du texte:

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

Cela a fonctionné pour moi:

padding: 5px;
background-clip: content-box;