Question 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 très bien, cependant, Chrome change la couleur de fond à une couleur jaune pâle.

Le design sur lequel je travaille utilise du texte clair sur un fond sombre, ce qui dégrade vraiment l'apparence du formulaire - 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?


464
2018-05-06 13:36


origine


Réponses:


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 ex. white, #DDD, rgba(102, 163, 177, 0.45).

Mais 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 centaines ou de 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 d'entrée normale de 20px de hauteur, 30px 'rayon de flou' le couvrira parfaitement.


912
2018-01-07 23:35



J'ai une meilleure solution.

Le fait de définir l’arrière-plan sur une autre couleur comme ci-dessous n’a pas résolu le problème 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;
}

216
2018-03-30 15:44



Les solutions précédentes consistant à ajouter une ombre de boîte fonctionnent bien pour les personnes qui ont besoin d'un arrière-plan de couleur unie. L'autre solution de l'ajout d'une transition fonctionne, mais le fait d'avoir à définir une durée / un retard 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;
}

175
2018-05-25 08:57



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

45
2017-09-10 15:07



Cela a été conçu comme ce comportement de coloration a été de WebKit. Cela 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:

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

Ou vous pouvez changer la couleur de l'autofill en faisant:

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

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

C'est un comportement de WebKit.


44
2018-05-06 22:26



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

21
2017-12-13 12:27



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

20
2017-12-11 02:32



Toutes les réponses ci-dessus ont fonctionné mais ont eu leurs défauts. Le code ci-dessous est un amalgame 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;
}

17
2018-06-12 06:39



TOUPET

input:-webkit-autofill

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

14
2017-10-23 21:43



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

 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


14
2017-11-03 09:27