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

Darüber hinaus:

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

Sie können auch Folgendes hinzufügen

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

Andernfalls wird die gelbe Farbe wiederhergestellt, wenn Sie auf die Eingabe klicken. Für den Fokus, wenn Sie Bootstrap verwenden, ist der zweite Teil für die Grenze Hervorhebung 0 0 8px rgba(82, 168, 236, 0.6);

So dass sie wie jede andere Bootstrap-Eingabe aussehen wird.

Answer 2

Dies funktioniert für Eingabe, Textarea und Auswahl im normalen, Hover-, Fokus- und aktiven Zustand.

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 0 1000px white inset !important;
}

Hier ist die SCSS-Version der obigen Lösung für diejenigen, die mit SASS/SCSS arbeiten.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    &, &:hover, &:focus, &:active{
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

Answer 3

Ich habe eine reine CSS-Lösung, die CSS-Filter verwendet.

filter: grayscale(100%) brightness(110%);

Der Graustufenfilter ersetzt das Gelb durch Grau, und die Helligkeit entfernt das Grau.

SEHEN CODEPEN

Answer 4

Wenn Sie die Autovervollständigungsfunktion beibehalten möchten, können Sie mit jQuery das Styling von Chrome entfernen. Ich habe hier einen kurzen Beitrag darüber geschrieben: 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);
    });
});}

Answer 5

Ich habe eine andere Lösung mit JavaScript ohne JQuery entwickelt. Wenn Sie dies nützlich finden oder meine Lösung erneut veröffentlichen möchten, bitte ich Sie nur, meinen Namen anzugeben. Viel Spaß damit. - 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();
        }
    }
}

Dieser Code basiert auf der Tatsache, dass Google Chrome den Webkit-Stil entfernt, sobald zusätzlicher Text eingegeben wird. Eine einfache Änderung des Wertes des Eingabefeldes reicht nicht aus, Chrome möchte ein Ereignis. Indem wir uns auf jedes Eingabefeld (Text, Passwort) konzentrieren, können wir ein Tastaturereignis (den Buchstaben "a") senden und dann den Textwert auf den vorherigen Zustand (den automatisch ausgefüllten Text) zurücksetzen. Denken Sie daran, dass dieser Code in jedem Browser ausgeführt wird und jedes Eingabefeld auf der Webseite überprüft, passen Sie ihn entsprechend Ihren Bedürfnissen an.