it-swarm.com.de

Eingabehintergrundfarbe für die automatische Chrome-Vervollständigung entfernen

In einem Formular, an dem ich gerade arbeite, füllt Chrome die E-Mail- und Kennwortfelder automatisch aus. Dies ist in Ordnung, jedoch ändert Chrome 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 kommt. Ich habe steife gelbe Kästchen und fast unsichtbaren weißen Text. Sobald das Feld fokussiert ist, kehren die Felder zum Normal zurück.

Kann man verhindern, dass Chrome die Farbe dieser Felder ändert?

519
DisgruntledGoat

Dies funktioniert gut. Sie können Eingabefeldstile sowie Textstile innerhalb des Eingabefelds ändern:

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

Aber transparent funktioniert hier nicht.

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

Außerdem können Sie dies verwenden, um die Textfarbe zu ändern:

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

Hinweis: Verwenden Sie keinen übermäßigen Unschärfekreis in Hunderten oder Tausenden. Dies hat keinen Nutzen und kann die Prozessorlast auf schwächeren mobilen Geräten belasten. (Dies gilt auch für tatsächliche Außenschatten). Bei einem normalen Eingabefeld mit einer Höhe von 20px wird der Unschärferadius mit 30px perfekt abgedeckt.

999

Ich habe eine bessere Lösung.

Das Einstellen des Hintergrunds auf eine andere Farbe (siehe 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 noch ein paar andere Dinge ausprobiert und mir dabei 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;
}
242
Nathan White

Die bisherigen Lösungen zum Hinzufügen eines Boxschattens funktionieren gut für Benutzer, die einen einfarbigen Hintergrund benötigen. Die andere Lösung des Hinzufügens eines Übergangs funktioniert, aber wenn Sie eine Dauer/Verzögerung einstellen müssen, bedeutet dies, dass sie irgendwann wieder angezeigt wird.

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

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

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

230
Steve

Dies ist meine Lösung, ich habe Übergangs- und Übergangsverzögerung verwendet, daher kann ich meine Eingabefelder transparent hinterlegen. 

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 der Fall, da dieses Farbverhalten von WebKit stammt. Es ermöglicht dem Benutzer zu verstehen, dass die Daten vorab gefüllt wurden. Bug 1334

Sie können die automatische Vervollständigung deaktivieren, indem Sie (oder die spezifische Formularsteuerung) ausführen:

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

Oder Sie können die Farbe der automatischen Ausfüllung folgendermaßen ändern:

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

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

Dies ist ein WebKit-Verhalten.

47
Mohamed Mansour

Eine mögliche Problemumgehung besteht im Moment darin, einen "starken" Schatten 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;
}  
24
Tamás Pap

probieren Sie dies aus, um den automatischen Ausfü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;
    }
21

Alle obigen Antworten funktionierten, hatten aber ihre Fehler. Der folgende Code ist eine Zusammenführung von zwei der oben genannten Antworten, die fehlerfrei und ohne Blinken funktioniert.

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;
}
18
Jack Russell

Nach 2 Stunden Suche scheint es, als ob Google immer noch die gelbe Farbe überschreibt, aber ich habe das Problem behoben. Stimmt. Es wird auch für Schwebeflug, Fokus usw. funktionieren. Alles, was Sie tun müssen, ist! 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 Eingabefeldern entfernt 

14
don

SASS

input:-webkit-autofill

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

Wenn Sie die Autocomplete-Funktion beibehalten möchten, können Sie mit jQuery das Styling von Chrome entfernen. Ich habe hier einen kurzen Beitrag 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);
    });
});}
8
Benjamin

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

Ansonsten wird die gelbe Farbe wieder angezeigt, wenn Sie auf die Eingabe klicken. Wenn Sie den Bootstrap verwenden, ist der zweite Teil für den Fokus die Markierung 0 0 8px rgba (82, 168, 236, 0.6). 

So dass es wie jede Bootstrap-Eingabe aussehen wird.

7
Linghua Jin

Ich hatte ein Problem, bei dem ich Box-Shadow nicht verwenden konnte, da das Eingabefeld transparent sein musste. Es ist ein bisschen ein Hack, aber reines CSS. Stellen Sie den Übergang auf eine sehr lange Zeit 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;
}
7
Alex

Versuche dies: Wie @ Nathan-white Antwort 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;
}
6
Surender Lohia

Ich habe eine andere Lösung mit JavaScript ohne JQuery entwickelt. Wenn Sie dies für nützlich halten oder beschließen, meine Lösung erneut zu posten, 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 Ä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 seinen vorherigen Zustand (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 an Ihre Bedürfnisse angepasst wird.

6

Durch das Hinzufügen einer Verzögerung von einer Stunde werden alle CSS-Änderungen am Eingabeelement angehalten. 
Dies ist besser als das Hinzufügen einer Übergangsanimation oder eines inneren Schattens.

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

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

Ich habe eine Lösung, wenn Sie das automatische Ausfüllen von Google Chrome verhindern möchten, aber es ist ein bisschen "Machete". Entfernen Sie einfach die Klasse, die Google Chrome diesen Eingabefeldern hinzufügt, und setzen Sie den Wert auf "", wenn Sie 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);           
});
3
Nicolas Arias

Die Lösung von Daniel Fairweather ( Entfernen der Eingabehintergrundfarbe für Chrome-Autovervollständigung? ) (Ich würde gerne seine Lösung bestätigen, brauche aber noch 15 Wiederholungen), sie funktioniert wirklich gut. Bei den meisten neuen Lösungen gibt es einen großen Unterschied: Sie können Hintergrundbilder behalten! Aber eine kleine Änderung (nur Chrome Check)

Und Sie müssen daran denken, funktioniert NUR auf sichtbaren Feldern

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 Schaltfläche zum Anzeigen/Ausblenden 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 noch einmal, ich würde es vorziehen, ein Kommentar zu sein. 

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

3
Jurion

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

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

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

SEHEN SIE CODEPEN

3
2ne

Ich gebe auf!

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

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

Keine der Lösungen hat für mich funktioniert, der eingeblendete Schatten funktioniert für mich nicht, da die Eingaben einen durchscheinenden Hintergrund über dem Seitenhintergrund haben.

Also fragte ich mich: "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, durch die Chrome die Felder nicht finden konnte, die automatisch gefüllt werden sollten:

1) Setzen Sie die Passworteingabe vor die Texteingabe. 2) Gib ihnen denselben Namen und dieselbe 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 passiert ist. Autovervollständigung ist kaputt!

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

Chrome 34.0.1847.116, OSX 10.7.5

2
i_a

Danke Benjamin! 

Die Mootools-Lösung ist etwas schwieriger, da ich mit $('input:-webkit-autofill') keine Felder bekommen kann.

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
}
2
andi

Dies funktioniert für Eingabe, Textbereich und Auswahl in den Zuständen Normal, Schwebeflug, Fokus und aktiv. 

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 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;
    }
}
2
Waqas Anwar

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

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

Im Allgemeinen wird das Tag beim Speichern des Werts gelöscht, neu erstellt und dann zurückgegeben.

2
FlorianB

Wie bereits erwähnt, funktioniert der Einsatz von -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;
}
1

ich benutze das. arbeite für mich ... entferne 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;
}
0
Ali Bagheri

und das hat bei mir funktioniert (Chrome 76 getestet)

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

Google Chrome-Benutzeragent verhindert CSS von Entwicklern. Für das Ändern von autofill muss die Benutzeroberfläche eine andere Eigenschaft wie diese verwenden:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}
0
AmerllicA

Das funktioniert für mich.

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

0

Das hat für mich funktioniert:

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

Dies ist eine komplexe Lösung für diese Aufgabe.

(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)
*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

0
BigClap

Wir können den Pseudo-Selektor -webkit-autofill verwenden, um diese Felder als Ziel festzulegen und sie nach Belieben zu formatieren. Das Standard-Styling wirkt sich nur auf die Hintergrundfarbe aus, aber die meisten anderen Eigenschaften, wie Rand und Schriftgröße, werden hier angewendet. Wir können die Farbe des Texts sogar mit -webkit-text-fill-color ändern, das im folgenden Ausschnitt enthalten ist.

/ * Autocomplete-Stile in Chrome ändern * /

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;
}
0
Mohit Sharma

Einfach hinzufügen,

    autocomplete="new-password"

zum Kennwortfeld.

0
Joakim Krassman