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

650

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?

DisgruntledGoat
quelle
2
Hier haben Sie weitere Informationen: stackoverflow.com/questions/2338102/…
dasm
Siehe meine Antwort auf einen ähnlichen Beitrag: stackoverflow.com/a/13691346/336235
Ernests Karlsons

Antworten:

1167

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.

Fareed Alnamrouti
quelle
1
In Chrome zeigt jetzt das User Agent Stylesheet :-internal-autofill-previewedund :-internal-autofill-selectedPseudoklassen anstelle von -webkit-autofill... Auf mysteriöse Weise -webkit-autofillfunktioniert es jedoch immer noch. Ich persönlich brauchte das nicht !important.
Andy
Ich brauchte die Hover / Focus / Active Pseudo-Selektoren nicht
Antoine129
317

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

Steve
quelle
Funktioniert wie Charme.
Lalnuntluanga Chhakchhuak
1
Das funktioniert definitiv! (Chrome 79)
Lashae
3
Ich finde das besser als die akzeptierte Antwort ... Die Box-Shadow-Methode ist clever und funktioniert, aber wenn ein Benutzer einen Wert zum automatischen Ausfüllen auswählt, blinkt die Standardfarbe kurz im Eingabefeld, was problematisch sein kann wenn Ihre Eingaben einen dunklen Hintergrund haben. Diese Lösung hat keine derartigen Probleme. Prost!
Skwidbreth
Perfekt! Arbeitete noch besser als ich gehofft hatte!
SDLINS
2
Dies funktioniert für Vuetify 2 besonders, wenn Siecolor: inherit
Marc
275

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;
}
Nathan White
quelle
7
Super, ich brauche auch einen transparenten Hintergrund. PS: Vergiss die Textfarbe nicht -webkit-text-fill-color: yellow !important;.
Gfpacheco
Dies zeigt weiterhin den Hintergrund des automatischen Füllens an, wenn die Eingabe ausgeblendet / angezeigt wurde display. Geige - Check it out
Martin
27
Anstatt das transition-durationlächerlich hoch zu setzen, wäre es besser, das transition-delaystattdessen zu setzen . Auf diese Weise reduzieren Sie die Möglichkeit von Farbänderungen noch weiter.
Shaggy
Der transitionHack funktioniert nur, wenn die Eingabe nicht automatisch mit einem vom Browser aufgezeichneten Standardeintrag gefüllt wird. Andernfalls bleibt der gelbe Hintergrund erhalten.
Guari
1
Tolle Lösung ... aber warum funktioniert das? Und warum funktioniert die Einstellung background-colornicht? Chrome muss das beheben !!
TetraDev
60

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;
}
Gísli Freyr Svavarsson
quelle
5
Ich habe ein Bild als Hintergrund des Eingabefeldes festgelegt, diese Lösung entfernt den gelben Farbton, aber das Hintergrundbild ist immer noch ausgeblendet
Matteo Tassinari
Die bisher beste Lösung funktioniert hervorragend mit vorhandenen box-shadowzur Validierung
Yoann
Chrom sagte, "color 9999s ease-out, background-color 9999s ease-out";ist nicht valide Ausdruck. Ich habe damals Code verwendet -webkit-transition: background-color 9999s ease-out;und-webkit-text-fill-color: #fff !important;
naanace
1
arbeitete aber ohne das doppelte Zitat für mich;)
Jon
@Yoann wie genau hat es mit deiner vorhandenen box-shadowValidierung funktioniert ? In meinem Fall wird aufgrund dieser CSS-Regel mein benutzerdefinierter roter Box-Schatten (der auf einen Eingabefehler hinweist) verzögert, sodass der Benutzer glaubt, dass die letzte Eingabe ungültig ist, obwohl sie tatsächlich gut ist.
Paul Razvan Berg
50

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.

Mohamed Mansour
quelle
22
Danke, aber diese Webkit-CSS-Regel funktioniert nicht. Das Stylesheet des Benutzeragenten überschreibt immer die Hintergrundfarbe, selbst wenn es (a) auf !importantund (b) mit einer ID für eine höhere Spezifität ausgerichtet ist. Es sieht so aus, als würde Chrome es immer überschreiben. Das Entfernen der automatischen Vervollständigung scheint zu funktionieren, aber es ist wirklich nicht das, was ich tun möchte.
DisgruntledGoat
1
Einige Leute haben das gleiche Problem. Haben Sie den Fehlerbeitrag überprüft? code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour
6
Chrome blockiert alle CSS-Versuche, diese gelbe Farbe zu überschreiben. Die Einstellung autocomplete="off"wird sicherlich Probleme mit der Barrierefreiheit aufwerfen. Warum ist diese Antwort überhaupt als richtig markiert?
João
2
Dies ist eine gute Lösung. Wenn Sie jedoch React verwenden, wird die automatische Vervollständigung als unbekannte DOM-Eigenschaft beanstandet. Daher ist es tatsächlich autoComplete (beachten Sie camelcased).
Tim Scollick
2
Das Deaktivieren der automatischen Vervollständigung ist ein Hack, keine Lösung
Paullo
30

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;
}  
Tamás Pap
quelle
2
Dies ist die Lösung, die tatsächlich funktioniert. Wir möchten den gelben Hintergrund nicht nur einige Male überspringen, da die akzeptierte Antwort dazu führen würde.
Davidkonrad
22

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;
    }
Francisco Costa
quelle
Für die Neugierigen hat die Hintergrundfarbe keine Wirkung. Der -webkit-box-shadow ist das clevere Bit, das den gelben Hintergrund in Chrome
überschreibt
19

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
Patrick Fisher
quelle
1
Dies hat bei mir tatsächlich funktioniert, da die akzeptierte Antwort blassgelb blinkt.
CleoR
beste Lösung imho
Jan Paepke
18

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;
}
Jack Russell
quelle
Ich habe ein Bild als Hintergrund für das Eingabefeld festgelegt. Diese Lösung entfernt den gelben Farbton, aber das Hintergrundbild ist immer noch ausgeblendet
Matteo Tassinari
15

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

Don
quelle
10

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.

Linghua Jin
quelle
10

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;
}
Alex
quelle
Ab dem neuesten Chrome 50.xx funktioniert IT einwandfrei. Vielen Dank!
vivekkupadhyay
2
Anstatt das transition-durationlächerlich hoch zu setzen, wäre es besser, das transition-delaystattdessen zu setzen . Auf diese Weise reduzieren Sie die Möglichkeit von Farbänderungen noch weiter.
Shaggy
@ Shaggy danke, ich habe es gerade auf eine Verzögerung umgestellt. Viel schöner.
Alex
10

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;
}
StefansArya
quelle
9

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;
}
Surender Lohia
quelle
Dies ist die beste Antwort, nachdem Sie alle Antworten ausprobiert haben.
Gfcodix
8

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);
    });
});}
Benjamin
quelle
Dies scheint die beste Lösung zu sein, obwohl sie Kicksends Mailcheck blockiert . Irgendwelche Ideen, wie man das umgehen kann?
João
Dies ist keine gute Lösung, da die automatische Vervollständigung des Passworts von Google Chrome nicht mehr funktioniert. Das heißt, Sie geben zunächst den Namen ein und Google Chrome füllt das Passwort automatisch aus. Sobald jedoch das obige Javascript ausgeführt wird, wird der Name gelöscht und erneut festgelegt, und das automatisch ausgefüllte Passwort geht verloren
vanval
6

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.

Daniel Fairweather
quelle
Nun, es hat größtenteils funktioniert. Es löscht leider mein Passwort. Der Versuch, das Passwort zuerst zu speichern und es nach den for-Schleifen zurückzusetzen, aber Chrome scheint einige Probleme damit zu haben. mmmm
Dustin Silk
6

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

2ne
quelle
Das funktioniert bei mir nicht?
Ikechukwu Eze
5

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;
    }
}
Waqas Anwar
quelle
Schön und danke für den SASS-Code!
Bernoulli IT
4

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);
            }
        }
    }
}
jedmao
quelle
3

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');
    });
}
ed1nh0
quelle
3

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);           
});
Nicolas Arias
quelle
3

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.

Jurion
quelle
3

und das hat bei mir funktioniert (Chrome 76 getestet)

input:-internal-autofill-selected {
    background-color: transparent;
}
guido _nhcol.com.br_
quelle
3

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;
}
SUHAIL KC
quelle
Dies funktioniert (nicht mehr) und wurde von CSS Tricks BTW
Bernoulli IT
1
Das hat bei mir funktioniert.
AzizStark
2

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
}
und ich
quelle
2

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

i_a
quelle
2

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.

FlorianB
quelle
Die Lösung von Fareed Namrouti funktioniert für mich unter Chrome 51.0.2704.106 / OSX 10.11.5 einwandfrei.
Oens
2

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;
}
Ali Bagheri
quelle
1

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;
}
Giedrius Vičkus
quelle
1

Das hat bei mir funktioniert:

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