Das automatische Ausfüllen des Google Chrome-Formulars und sein gelber Hintergrund

Ich habe ein Designproblem mit Google Chrome und seiner Funktion zum automatischen Ausfüllen von Formularen. Wenn sich Chrome ein Login / Passwort merkt, ändert sich die Hintergrundfarbe in eine gelbe.

Hier einige Screenshots:

Wie entferne ich diesen Hintergrund oder deaktiviere einfach das automatische Ausfüllen?

Ändern Sie "Weiß" in eine beliebige Farbe.

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

Wenn ihr transparente Eingabefelder wollt, könnt ihr Ü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;
}

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

In Firefox können Sie die automatische Vervollständigung in einem Formular mithilfe des Attributs autocomplete = "off / on" deaktivieren. Ebenso können die automatische Vervollständigung einzelner Elemente mit demselben Attribut festgelegt werden.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

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

Wenn Sie das automatische Ausfüllen sowie alle Daten, angehängten Handler und Funktionen, die an Ihre Eingabeelemente angehängt sind, beibehalten 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 fragt ab, bis es automatisch ausgefüllte Elemente findet, klont sie einschließlich Daten und Ereignisse, fügt sie dann an derselben Stelle in das DOM ein und entfernt das Original. Die Abfrage wird beendet, sobald ein Klon gefunden wird, da das automatische Ausfüllen nach dem Laden der Seite manchmal eine Sekunde dauert. Dies ist eine Variation eines früheren Codebeispiels, jedoch robuster und behält so viele Funktionen wie möglich bei.

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

Das folgende CSS entfernt die gelbe Hintergrundfarbe und ersetzt sie durch eine Hintergrundfarbe Ihrer Wahl. Das automatische Ausfüllen wird nicht deaktiviert und es sind keine jQuery- oder Javascript-Hacks erforderlich.

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

Lösung kopiert von: Überschreiben Sie das Ausfüllen von Browserformularen und das Hervorheben von Eingaben mit HTML / CSS

Arbeitete für mich, nur die CSS-Änderung erforderlich.

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

Sie können anstelle von #ffffff eine beliebige Farbe verwenden .

Ein bisschen hacky, funktioniert aber perfekt für mich

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

Eine Kombination von Antworten hat bei mir funktioniert

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Hier ist die MooTools-Version von Jason. Behebt es auch in Safari.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

Dies behebt das Problem sowohl in Safari als auch in Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Dies hat mir geholfen, eine reine CSS-Version.

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

wo weiß kann jede Farbe sein, die Sie wollen.

Ich benutze das,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

Fügen Sie einfach diese kleine Codezeile in Ihr Tag ein.

autocomplete="off"

Fügen Sie dies jedoch nicht in das Feld Benutzername / E-Mail / ID-Name ein, da es für dieses Feld deaktiviert wird, wenn Sie weiterhin die automatische Vervollständigung verwenden möchten. Aber ich habe einen Weg gefunden, dies zu umgehen. Platzieren Sie einfach den Code in Ihrem Passworteingabetag, da Sie Passwörter sowieso nie automatisch vervollständigen. Dieser Fix sollte die Farbkraft und die Fähigkeit zur automatischen Vervollständigung von Matinain in Ihrem E-Mail- / Benutzernamenfeld beseitigen und es Ihnen ermöglichen, umfangreiche Hacks wie Jquery oder Javascript zu vermeiden.

Wenn Sie es vollständig entfernen möchten, habe ich den Code in den vorherigen Antworten so angepasst, dass er auch beim Schweben, Aktivieren und Fokussieren funktioniert:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

Hier ist eine Mootools-Lösung, die das Gleiche wie die von Alessandro tut - ersetzt jede betroffene Eingabe durch eine neue.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

Was ist mit dieser Lösung:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Es schaltet die automatische Vervollständigung und das automatische Ausfüllen aus (so dass gelbe Hintergründe verschwinden), wartet 100 Millisekunden und schaltet dann die automatische Vervollständigung ohne automatische Verfüllung zurück.

Wenn Sie Eingaben haben, die automatisch ausgefüllt werden müssen, geben Sie ihnen die auto-complete-onCSS-Klasse.

Keine der Lösungen funktionierte für mich, die Eingabe von Benutzername und Passwort wurde immer noch ausgefüllt und mit dem gelben Hintergrund versehen.

Also fragte ich mich: "Wie bestimmt Chrome, was auf einer bestimmten Seite automatisch ausgefüllt werden soll?"

"Sucht es nach Eingabe-IDs, Eingabenamen? Formular-IDs? Formularaktion?"

Durch meine Experimente mit dem Benutzernamen und den Passworteingaben gab es nur zwei Möglichkeiten, die dazu führten, dass Chrome die Felder, die automatisch ausgefüllt werden sollten, nicht finden konnte:

1) Stellen Sie die Passworteingabe vor die Texteingabe. 2) Geben Sie ihnen den gleichen Namen und die gleiche ID ... oder keinen Namen und keine ID.

Nach dem Laden der Seite können Sie mit Javascript entweder die Reihenfolge der Eingaben auf der Seite ändern oder ihnen dynamisch ihren Namen und ihre ID geben ...

Und Chrome weiß nicht, was es getroffen hat ... die automatische Vervollständigung bleibt ausgeschaltet.

Verrückter Hack, ich weiß. Aber es funktioniert für mich.

Chrome 34.0.1847.116, OSX 10.7.5

Der einzige Weg, der für mich funktioniert, war: (jQuery erforderlich)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Ich habe dieses Problem für ein Passwortfeld behoben, das mir so gefällt:

Stellen Sie den Eingabetyp auf Text anstelle von Kennwort ein

Entfernen Sie den eingegebenen Textwert mit jQuery

Konvertieren Sie den Eingabetyp mit jQuery in ein Kennwort

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Ein Update der Arjans-Lösung. Wenn Sie versuchen, die Werte zu ändern, werden Sie nicht zugelassen. Das funktioniert gut für mich. Wenn Sie sich auf eine Eingabe konzentrieren, wird diese gelb. es ist nah genug.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

Versuchen Sie diesen Code:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

Fareed Namrouti Antwort ist richtig. Der Hintergrund wird jedoch immer noch gelb, wenn der Eingang ausgewählt wird . Hinzufügen !importantBeheben Sie das Problem. Wenn Sie auch textareaund selectmit dem gleichen Verhalten wollen, fügen Sie einfach hinzutextarea:-webkit-autofill, select:-webkit-autofill

Nur Eingabe

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Eingabe, Auswahl, Textbereich

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Hinzufügen autocomplete="off" wird es nicht schneiden.

Ändern Sie das Attribut für den Eingabetyp in type="search".
Google wendet keine automatische Füllung auf Eingaben mit einer Art von Suche an.

Hoffe das spart dir etwas Zeit.

Wenn Sie das gelbe Flackern vermeiden möchten, bis Ihr CSS angewendet wird, schlagen Sie einen Übergang auf diesen bösen Jungen wie folgt vor:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

Das finale Resultat:

$(document).ready(function(){
    var contadorInterval = 0;
    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();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

<input type="text" name="foo" autocomplete="off" />

Ähnliche Frage: Link

Ich fand mich gerade mit der gleichen Frage. Das funktioniert bei mir:

form :focus {
  outline: none;
}