Entfernen der Hintergrundfarbe von Eingaben für die Chrome-Autovervollständigung?

Question

In einem Formular, an dem ich gerade arbeite, füllt Chrome die Felder für E-Mail und Kennwort automatisch aus. Das ist in Ordnung, aber Chrome ändert die Hintergrundfarbe in ein helles Gelb.

Das Design, an dem ich arbeite, verwendet hellen Text auf dunklem Hintergrund, so dass dies das Aussehen des Formulars wirklich durcheinander bringt - ich habe starke gelbe Kästchen und fast unsichtbaren weißen Text. Sobald das Feld fokussiert ist, werden die Felder wieder normal angezeigt.

Ist es möglich, Chrome davon abzuhalten, die Farbe dieser Felder zu ändern?

Answer 1

Ich habe eine Lösung, wenn Sie das automatische Ausfüllen von Google Chrome verhindern wollen, aber es ist ein bisschen "Machete", entfernen Sie einfach die Klasse, die Google Chrome zu diesen Eingabefeldern hinzufügt und setzen Sie den Wert auf "", wenn Sie nicht brauchen, um Daten nach dem Laden zu zeigen.

$(document).ready(function () {
    setTimeout(function () {
        var data = $("input:-webkit-autofill");

        data.each(function (i, obj) {
            $(obj).removeClass("input:-webkit-autofill");
            obj.value = "";
        });
    }, 1);          
});

Answer 2

Wir können die -webkit-autofill Pseudo-Selektor, um diese Felder auszuwählen und sie nach unseren Vorstellungen zu gestalten. Die Standardgestaltung wirkt sich nur auf die Hintergrundfarbe aus, aber die meisten anderen Eigenschaften, wie Rahmen und Schriftgröße, gelten auch hier. Wir können sogar die Farbe des Textes ändern, indem wir -webkit-text-fill-color die in dem unten stehenden Ausschnitt enthalten ist.

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

Answer 3

Das hat bei mir funktioniert:

padding: 5px;
background-clip: content-box;

Answer 4

Keine der Lösungen hat bei mir funktioniert, der eingefügte Schatten funktioniert bei mir nicht, weil die Eingaben einen durchsichtigen Hintergrund haben, der den Seitenhintergrund überlagert.

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

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

Bei meinen Experimenten mit den Eingaben für den Benutzernamen und das Kennwort 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 denselben Namen und dieselbe ID ... oder gar keinen Namen und keine ID.

Nachdem die Seite geladen ist, können Sie mit Javascript entweder die Reihenfolge der Eingaben auf der Seite dynamisch ändern oder ihnen dynamisch einen Namen und eine ID geben ...

Und Chrome weiß nicht, wie ihm geschieht ... die automatische Vervollständigung ist kaputt!

Verrückter Schreiberling, ich weiß. Aber es funktioniert bei mir.

Chrome 34.0.1847.116, OSX 10.7.5

Answer 5

Die Lösung von Daniel Fairweather ( Entfernen der Hintergrundfarbe von Eingaben für die Chrome-Autovervollständigung? ) (ich würde seine Lösung gerne hochstufen, brauche aber noch 15 Punkte) funktioniert wirklich gut. Es gibt einen wirklich großen Unterschied zu den meisten upvoted Lösung: Sie können Hintergrundbilder zu halten! Aber eine kleine Änderung (nur Chrome Check)

Und Sie müssen daran denken, es funktioniert NUR bei sichtbaren Feldern ¡!

Wenn Sie also $.show() für Ihr Formular verwenden, müssen Sie diesen Code nach dem show() Ereignis ausführen

Meine vollständige Lösung (ich habe eine Schaltfläche zum Ein- und Ausblenden des Anmeldeformulars):

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

Nochmals Entschuldigung, ich würde es vorziehen, wenn es ein Kommentar wäre.

Wenn Sie möchten, kann ich einen Link zu der Seite setzen, auf der ich es verwendet habe.