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


653

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?


2
Ici vous avez des informations plus larges: stackoverflow.com/questions/2338102/…
dasm

Voir ma réponse à un article similaire: stackoverflow.com/a/13691346/336235
Ernests Karlsons

Réponses:


1170

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.


1
Dans Chrome maintenant, la feuille de style de l'agent utilisateur affiche :-internal-autofill-previewedet les :-internal-autofill-selectedpseudoclasses au lieu de -webkit-autofill... Mystérieusement, cependant, -webkit-autofillfonctionne toujours. Personnellement, je n'en avais pas besoin !important.
Andy

Je n'avais pas besoin des pseudo-sélecteurs hover / focus / active
antoine129

318

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


Fonctionne comme un charme.
Lalnuntluanga Chhakchhuak

1
Cela fonctionne vraiment! (Chrome 79)
Lashae

3
Je trouve que c'est mieux que la réponse acceptée ... la méthode box-shadow est intelligente et fonctionne, mais lorsqu'un utilisateur sélectionne une valeur à remplir automatiquement, la couleur par défaut clignote brièvement dans le champ de saisie, ce qui peut être gênant si vos entrées ont un fond sombre. Cette solution n'a pas de tels problèmes. À votre santé!
skwidbreth

Parfait! Fonctionné encore mieux que ce que j'avais espéré!
sdlins

2
Cela fonctionne pour Vuetify 2, surtout si vous définissezcolor: inherit
Marc

276

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

7
Génial, j'ai aussi besoin d'un fond transparent. PS: n'oubliez pas la -webkit-text-fill-color: yellow !important;couleur du texte.
gfpacheco

Cela affichera toujours l'arrière-plan de remplissage automatique lorsque l'entrée a été masquée / affichée avec display. Fiddle - Check it out
Martin

27
Au lieu de fixer le transition-durationridiculement haut, il serait préférable de le régler à la transition-delayplace. De cette façon, vous réduisez encore plus la possibilité de changements de couleurs.
Shaggy

Le transitionhack ne fonctionnera que si l'entrée n'est pas remplie automatiquement avec une entrée par défaut enregistrée par le navigateur, sinon le fond jaune sera toujours là.
guari

1
Excellente solution .... mais pourquoi cela fonctionne-t-il? Et pourquoi le réglage background-colorne fonctionne-t-il pas? Chrome doit résoudre ce problème !!
TetraDev

60

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

6
J'ai défini une image comme arrière-plan du champ de saisie, cette solution supprime la teinte jaune, mais l'image d'arrière-plan est toujours masquée
Matteo Tassinari

Jusqu'à présent, la meilleure solution fonctionne très bien avec la box-shadowvalidation existante
Yoann

chrome dit que l' "color 9999s ease-out, background-color 9999s ease-out";exprssion n'est pas valide. J'ai alors utilisé du code, -webkit-transition: background-color 9999s ease-out;et-webkit-text-fill-color: #fff !important;
naanace

1
travaillé mais sans la double citation pour moi;)
Jon

@Yoann comment cela a-t-il fonctionné exactement avec votre box-shadowvalidation existante ? Dans mon cas, en raison de cette règle css, mon ombre de boîte rouge personnalisée (qui indique une erreur de saisie) est retardée, ce qui fait croire à l'utilisateur que la dernière entrée est invalide alors qu'en fait elle est bonne.
Paul Razvan Berg

50

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.


22
merci mais cette règle CSS webkit ne fonctionne pas. La feuille de style de l'agent utilisateur remplace toujours la couleur d'arrière-plan, même si elle (a) est définie sur !importantet (b) est ciblée avec un ID pour une spécificité plus élevée. Il semble que Chrome va toujours le remplacer. La suppression de la saisie semi-automatique semble fonctionner, mais ce n'est vraiment pas ce que je veux faire.
DisgruntledGoat

1
Certaines personnes ont le même problème, avez-vous vérifié la publication du bogue? code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour

6
Chrome bloque toute tentative CSS de remplacer cette couleur jaune. Le réglage autocomplete="off"soulèvera certainement des problèmes d'accessibilité. Pourquoi cette réponse est-elle marquée comme correcte de toute façon?
João

2
C'est une bonne solution mais si vous utilisez React, il se plaindra que la saisie semi-automatique est une propriété DOM inconnue. Par conséquent, il s'agit en fait de la saisie semi-automatique (notez les caractères camelcas).
Tim Scollick

2
Désactiver la saisie semi-automatique est un hack pas une solution
Paullo

30

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

2
C'est la solution qui fonctionne réellement, nous ne voulons pas sauter le fond jaune seulement quelques fois, car la réponse acceptée en résulterait.
davidkonrad

22

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

pour les curieux, la couleur de fond n'a aucun effet. Le -webkit-box-shadow est le bit intelligent qui remplace le fond jaune dans Chrome
Geuis

19

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

J'ai défini une image comme arrière-plan du champ de saisie, cette solution supprime la teinte jaune, mais l'image d'arrière-plan est toujours masquée
Matteo Tassinari

C'est le seul qui fonctionne pour moi dans Chrome 83. Le plus voté travaillait jusqu'à Chrome 82.
sdlins

19

TOUPET

input:-webkit-autofill

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

1
Cela a réellement fonctionné pour moi puisque la réponse acceptée clignote en jaune pâle.
CleoR

meilleure solution à mon humble avis
Jan Paepke

15

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


11

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

10

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.


10

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

À partir de maintenant dans le dernier Chrome 50.xx, IL FONCTIONNE parfaitement bien. Merci beaucoup!
vivekkupadhyay

2
Au lieu de fixer le transition-durationridiculement haut, il serait préférable de le régler à la transition-delayplace. De cette façon, vous réduisez encore plus la possibilité de changements de couleurs.
Shaggy

@Shaggy merci, je viens de passer à un retard. Beaucoup mieux.
Alex

9

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

C'est la meilleure réponse après avoir essayé toutes les réponses.
gfcodix

8

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

Cela semble être la meilleure solution, même si cela bloque la vérification du courrier de Kicksend . Des idées sur la façon de contourner cela?
João

Ce n'est pas une bonne solution, car la saisie automatique du mot de passe de Google Chrome cesse de fonctionner. C'est d'abord que vous remplissez le nom et Google Chrome remplit automatiquement le mot de passe. Cependant, une fois que le javascript ci-dessus s'exécute, le nom est supprimé et défini à nouveau, et le mot de passe rempli automatiquement est perdu
vanval

6

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.


eh bien, cela a fonctionné pour la plupart .. il efface malheureusement mon mot de passe. Essayer de l'obtenir pour enregistrer le mot de passe en premier et le réinitialiser après les boucles for, mais Chrome semble avoir quelques problèmes avec cela. mmmm
Dustin Silk

6

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


Ça ne marche pas pour moi?
Ikechukwu Eze

5

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

Nice one, et merci pour le code SASS!
Bernoulli IT

4

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

3

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

3

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

3

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é.


3

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

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

3

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

Cela ne fonctionne pas (plus) et a été copié à partir de CSS Tricks BTW
Bernoulli IT

1
Cela a fonctionné pour moi.
AzizStark

2

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
}

2

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


2

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.


La solution de fareed namrouti me convient parfaitement sur Chrome 51.0.2704.106 / OSX 10.11.5.
oens

2

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

1

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

1

Cela a fonctionné pour moi:

padding: 5px;
background-clip: content-box;
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.