Google Chrome Formular-Autofill und sein gelber Hintergrund

Question

Ich habe ein Designproblem mit Google Chrome und seiner Formular-Ausfüllfunktion. Wenn Chrome sich an einige Anmeldeinformationen erinnert, ändert es die Hintergrundfarbe in Gelb.

Hier sind einige Screenshots:

Wie kann man diesen Hintergrund entfernen oder einfach diese Autofill-Funktion deaktivieren?

Answer 1

Ändern Sie "weiß" in eine beliebige Farbe Ihrer Wahl.

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

Answer 2

Wenn Sie transparente Eingabefelder wollen, können Sie Übergang und Übergangsverzögerung verwenden.

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

Answer 3

Lösung hier:

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

Answer 4

In Firefox können Sie alle Autovervollständigungen in einem Formular deaktivieren, indem Sie das Attribut autocomplete="off/on" verwenden. Ebenso können einzelne Elemente zur Autovervollständigung mit demselben Attribut festgelegt werden.

Sie können dies in Chrome testen, da es funktionieren sollte.

Answer 5

Wenn Sie das Autofill sowie alle Daten, angehängten Handler und Funktionen an Ihren Eingabeelementen erhalten möchten, versuchen Sie dieses Skript:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Es wird weiterhin abgefragt, bis Autofill-Elemente gefunden werden, diese werden geklont und einschließlich Daten und Ereignissen in das DOM an derselben Stelle eingefügt und das Original entfernt. Es wird mit dem Abfragen gestoppt, sobald ein Element zum Klonen gefunden wurde, da das Autofill manchmal eine Sekunde nach dem Laden der Seite dauert. Dies ist eine Variation eines früheren Codebeispiels, jedoch robuster und behält so viel Funktionalität wie möglich bei.

(Bestätigt funktioniert in Chrome, Firefox und IE 8.)