Eingabehintergrundfarbe für die automatische Vervollständigung von Chrome entfernen?

In einem Formular, an dem ich arbeite, füllt Chrome die E-Mail- und Kennwortfelder automatisch aus. Dies ist in Ordnung, Chrome ändert jedoch die Hintergrundfarbe in eine hellgelbe Farbe.

Das Design, an dem ich arbeite, verwendet hellen Text auf einem dunklen Hintergrund, so dass das Aussehen des Formulars wirklich durcheinander gebracht wird - ich habe stark gelbe Kästchen und nahezu unsichtbaren weißen Text. Sobald das Feld fokussiert ist, kehren die Felder zur Normalität zurück.

Ist es möglich, Chrome daran zu hindern, die Farbe dieser Felder zu ändern?

Dies funktioniert einwandfrei. Sie können die Eingabefeldstile sowie die Textstile im Eingabefeld ändern:

Hier können Sie eine beliebige Farbe zB verwenden white, #DDD, rgba(102, 163, 177, 0.45).

Funktioniert hier aber transparentnicht.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Darüber hinaus können Sie damit die Textfarbe ändern:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Hinweis: Verwenden Sie keinen übermäßigen Unschärferadius zu Hunderten oder Tausenden. Dies hat keinen Vorteil und kann zu einer Prozessorbelastung schwächerer mobiler Geräte führen. (Gilt auch für tatsächliche Außenschatten). Bei einem normalen Eingabefeld mit einer Höhe von 20 Pixel wird es durch einen Unschärferadius von 30 Pixel perfekt abgedeckt.

Die vorherigen Lösungen zum Hinzufügen eines Kastenschattens eignen sich gut für Personen, die einen einfarbigen Hintergrund benötigen. Die andere Lösung zum Hinzufügen eines Übergangs funktioniert, aber wenn Sie eine Dauer / Verzögerung einstellen müssen, wird dies möglicherweise irgendwann wieder angezeigt.

Meine Lösung besteht darin, stattdessen Keyframes zu verwenden, damit immer die Farben Ihrer Wahl angezeigt werden.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Beispiel Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Ich habe eine bessere Lösung.

Das Einstellen des Hintergrunds auf eine andere Farbe wie unten hat das Problem für mich nicht gelöst, da ich ein transparentes Eingabefeld benötigte

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

Also habe ich einige andere Dinge ausprobiert und mir Folgendes ausgedacht:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

Dies ist meine Lösung. Ich habe Übergang und Übergangsverzögerung verwendet, daher kann ich einen transparenten Hintergrund für meine Eingabefelder haben.

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

Dies ist wie geplant, da dieses Farbverhalten von WebKit stammt. Dadurch kann der Benutzer verstehen, dass die Daten vorab ausgefüllt wurden. Fehler 1334

Sie können die automatische Vervollständigung deaktivieren, indem Sie Folgendes tun (oder das spezifische Formularsteuerelement aktivieren):

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

Oder Sie können die Farbe der automatischen Füllung ändern, indem Sie Folgendes tun:

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

Beachten Sie, dass ein Fehler verfolgt wird, damit dies wieder funktioniert: http://code.google.com/p/chromium/issues/detail?id=46543

Dies ist ein WebKit-Verhalten.

Eine mögliche Problemumgehung für den Moment besteht darin, einen "starken" Innenschatten zu setzen:

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

Versuchen Sie dies, um den automatischen Füllstil auszublenden

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

SASS

input:-webkit-autofill

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

Alle oben genannten Antworten funktionierten, hatten aber ihre Fehler. Der folgende Code ist eine Zusammenführung von zwei der oben genannten Antworten, die einwandfrei funktioniert, ohne zu blinken.

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

Nach 2 Stunden Suche scheint es, dass Google die gelbe Farbe immer noch irgendwie überschreibt, aber ich für die Lösung dafür. Das stimmt. Es funktioniert auch für Hover, Fokus usw. Alles, was Sie tun müssen, ist hinzuzufügen! Wichtig.

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

Dadurch wird Gelb vollständig aus den Eingabefeldern entfernt

Außerdem:

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

Vielleicht möchten Sie auch 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 wieder angezeigt, wenn Sie auf die Eingabe klicken. Wenn Sie für den Fokus Bootstrap verwenden, ist der zweite Teil für den Rand, der 0 0 8px rgba (82, 168, 236, 0.6) hervorhebt.

So dass es wie jede Bootstrap-Eingabe aussieht.

Ich hatte ein Problem, bei dem ich Box-Shadow nicht verwenden konnte, weil das Eingabefeld transparent sein musste. Es ist ein bisschen ein Hack, aber reines CSS. Stellen Sie den Übergang auf einen sehr langen Zeitraum ein.

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

Das Hinzufügen einer Stunde Verzögerung würde alle CSS-Änderungen am Eingabeelement anhalten.
Dies ist besser, als Übergangsanimationen oder innere Schatten hinzuzufügen.

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

Versuchen Sie Folgendes: Wie oben bei der Antwort von @ Nathan-white mit geringfügigen Änderungen.

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

Wenn Sie die Autocomplete-Funktionalität 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);
    });
});}

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. Genießen. - 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. Das einfache Ändern des Eingabefeldwerts 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 Status (den automatisch ausgefüllten Text) setzen. Beachten Sie, dass dieser Code in jedem Browser ausgeführt wird und jedes Eingabefeld auf der Webseite überprüft und entsprechend Ihren Anforderungen anpasst.

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

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

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

SIEHE CODEPEN

Dies funktioniert für Eingabe, Textbereich und Auswahl in Normal-, Schwebe-, Fokus- und aktiven Zuständen.

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

Hier ist die SCSS-Version der oben genannten 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;
    }
}

Für diejenigen, die Compass verwenden:

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

Ich gebe auf!

Da es keine Möglichkeit gibt, die Farbe der Eingabe mit Autocomplete zu ändern, entscheide ich mich, alle mit jQuery für Webkit-Browser zu deaktivieren. So was:

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

Ich habe eine Lösung, wenn Sie verhindern möchten, dass das automatische Ausfüllen von Google Chrome ausgeführt wird, es jedoch ein wenig "machete" ist. Entfernen Sie einfach die Klasse, die Google Chrome zu diesen Eingabefeldern hinzufügt, und setzen Sie den Wert auf "", wenn Sie dies nicht anzeigen müssen Daten nach dem Laden speichern.

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

Die Lösung von Daniel Fairweather ( Entfernen der eingegebenen Hintergrundfarbe für die automatische Vervollständigung von Chrome? ) (Ich würde seine Lösung gerne verbessern, benötige aber immer noch 15 Wiederholungen) funktioniert wirklich gut. Es gibt einen wirklich großen Unterschied zu den meisten optimierten Lösungen: Sie können Hintergrundbilder behalten! Aber eine kleine Modifikation (nur Chrome Check)

Und Sie müssen bedenken, dass es NUR auf sichtbaren Feldern funktioniert !

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

Meine vollständige Lösung (ich habe eine Ein- / Ausblendschaltfläche für das Anmeldeformular):

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

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

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

und das hat bei mir funktioniert (Chrome 76 getestet)

input:-internal-autofill-selected {
    background-color: transparent;
}

Ich habe fast alle oben genannten Lösungen ausprobiert. Bei mir funktioniert nichts. Endlich mit dieser Lösung gearbeitet. Ich hoffe jemand hilft dabei.

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

Danke Benjamin!

Die Mootools-Lösung ist etwas kniffliger, da ich mit der Verwendung keine Felder abrufen kann. $('input:-webkit-autofill')Ich habe also Folgendes verwendet:

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
}

Keine der Lösungen hat bei mir funktioniert, der eingefügte Schatten funktioniert bei mir nicht, da die Eingaben einen durchscheinenden Hintergrund haben, der über dem Seitenhintergrund liegt.

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 überhaupt keinen Namen und keine ID.

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

Und Chrome weiß nicht, was es getroffen hat ... Autocomplete ist kaputt!

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

Chrome 34.0.1847.116, OSX 10.7.5

Leider hat 2016 (ein paar Jahre nach der Frage) keine der oben genannten Lösungen für mich funktioniert.

Hier ist die aggressive Lösung, die ich verwende:

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

Grundsätzlich wird das Tag beim Speichern des Werts gelöscht, neu erstellt und der Wert zurückgesetzt.

ich benutze das. arbeite für mich. Entfernen Sie den gelben Hintergrund des Feldes.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

Wie bereits erwähnt, funktioniert Inset-Webkit-Box-Shadow für mich am besten.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

Code-Snippet zum Ändern der Textfarbe:

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

Das hat bei mir funktioniert:

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