Suppression de la couleur de fond d'entrée pour L'autocomplete de Chrome?

j'ai une meilleure solution.

le réglage de l'arrière-plan à une autre couleur comme ci-dessous n'a pas résolu le problème pour moi parce que j'avais besoin d'un champ d'entrée transparent

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

donc j'ai essayé d'autres choses et je suis venu avec 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 de l'ajout d'une boîte-ombre fonctionne bien pour les personnes qui ont besoin d'un fond de couleur solide. L'autre solution consistant à ajouter une transition fonctionne, mais le fait d'avoir à définir une durée/un délai signifie qu'à un moment donné elle peut apparaître à nouveau.

ma solution est d'utiliser des images clés à la place, de cette façon il montrera toujours 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é transition et délai de transition donc je peux avoir un fond transparent sur mes champs d'entrée.

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 depuis ce comportement de coloration a été de WebKit. Il permet à l'utilisateur de comprendre les données ont été pré-rempli. Bug 1334

vous pouvez désactiver autocomplete en faisant (ou sur le contrôle de forme spécifique:

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

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

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

Note, il y a un bug traqué pour que cela fonctionne à nouveau: http://code.google.com/p/chromium/issues/detail?id=46543

c'est un comportement WebKit.

une solution possible pour le moment est de définir une" forte "ombre intérieure:

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 la saisie automatique de style

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 un amalgame de deux des réponses ci-dessus qui fonctionne parfaitement sans cligner des yeux.

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

SASS

input:-webkit-autofill

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

Après 2 heures de recherche, il semble encore google remplace la couleur jaune, mais j'ai la solution pour elle. C'est le droit. il fonctionnera pour le vol stationnaire, la mise au point, etc. aussi bien. tout ce que vous avez à faire est d'ajouter !important pour elle.

 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 voulez garder la fonctionnalité autocomplete intact, vous pouvez utiliser un peu de jQuery pour supprimer le style de Chrome. J'ai écrit un post à 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);
    });
});}

en plus de ceci:

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

vous pourriez aussi ajouter

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

autrement, quand vous cliquez sur l'entrée, la couleur jaune reviendra. Pour la mise au point, si vous utilisez bootstrap, la deuxième partie est pour la mise au point de la bordure 0 0 8px rgba(82, 168, 236, 0.6);

tel 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 d'entrée soit transparent. C'est un peu un piratage, mais CSS pur. Réglez la transition sur une période 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;
}

j'ai développé une autre solution en utilisant JavaScript sans JQuery. Si vous trouvez cela utile ou décidez de re-poster ma solution, je demande seulement que vous incluez mon nom. Profiter. - 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 veut un événement. En se concentrant sur chaque champ d'entrée (texte, mot de passe), nous pouvons envoyer un événement clavier (la lettre 'a') et ensuite définir la valeur du texte à son état précédent (le texte auto-rempli). Gardez à l'esprit que ce code sera exécuté dans chaque navigateur et vérifiera chaque champ d'entrée dans la page web, ajustez-le en fonction de vos besoins.

essayez ceci: Comme @ Nathan-white réponse ci-dessus avec des modifications mineures.

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

Ajout d'une heure de retard pause css changements sur l'élément d'entrée.

C'est mieux que d'ajouter de l'animation de transition ou de l'ombre intérieure.

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

j'ai une solution si vous voulez empêcher l'autofill de google chrome mais son un peu" machete", il suffit de supprimer la classe que google chrome ajoute à ces champs d'entrées et de définir la valeur à "" si vous n'avez pas besoin de montrer les données de magasin après la charge.

$(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 ( Retrait d'entrée de la couleur de fond pour Chrome saisie semi-automatique? ) (j'aimerais encourager sa solution, mais j'ai encore besoin de 15 rep) fonctionne vraiment bien. Il y a une énorme différence avec la solution la plus rétrograde : vous pouvez garder des images de fond ! Mais un peu de modification (juste Chrome vérifier)

Et que vous devez garder à l'esprit, il fonctionne UNIQUEMENT visible sur le champs !

donc vous si vous utilisez $.show() pour votre formulaire, vous devez exécuter ce code après show () event

Ma complète de la solution (j'ai un afficher/masquer les boutons de 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 une fois, 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, textarea et select dans les États normal, hover, focus et active.

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!

Puisqu'il n'y a 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 ceci:

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

aucune des solutions n'a fonctionné pour moi, l'ombre insérée ne fonctionnera pas pour moi parce que les entrées ont un fond translucide superposé sur le fond de la page.

alors je me suis demandé, "comment Chrome détermine-t-il ce qui doit être rempli automatiquement sur une page donnée?"

"est-il pour l'entrée id, noms d'entrée? La forme id? Forme d'action?"

grâce à mon expérimentation avec le nom d'utilisateur et les entrées de mot de passe, il n'y avait que deux j'ai trouvé des moyens qui empêcheraient Chrome de trouver les champs à remplir automatiquement:

1) Placez le mot de passe avant le texte. 2) Donnez-leur le même nom et la même carte d'identité ... ou pas de nom et d'identité à tous.

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

et Chrome ne sait pas ce qui le frappe ... la saisie semi-automatique est cassé!

crazy hack, je sais. Mais il travaille pour moi.

Chrome 34.0.1847.116, OSX 10.7.5

malheureusement strictement aucune des solutions ci-dessus travaillé pour moi en 2016 (quelques années après la question)

donc voici 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)">

essentiellement, il supprime l'étiquette tout en sauvegardant la valeur, et le 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 échelle de gris remplace le jaune par le gris, puis la luminosité enlève le gris.

VOIR CODEPEN "151970920

Comme mentionné avant, 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;
}

code aussi snippet pour changer la couleur du texte:

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

ce type a un grande 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

Simple, il suffit d'ajouter,

    autocomplete="new-password"

au champ Mot de passe.

Google Chrome user agent prevent developers ' CSS , donc pour changer autofill UI doit utiliser une autre propriété comme ceux-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*/
}