password - input element autocomplete attribute




Entfernen der Eingabehintergrundfarbe für Chrome Autocomplete? (20)

Alle obigen Antworten funktionierten, hatten aber ihre Fehler. Der folgende Code ist eine Verschmelzung von zwei der obigen 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;
}

In einem Formular, an dem ich gerade arbeite, füllt Chrome automatisch die Felder für E-Mail und Passwort aus. Das ist in Ordnung, jedoch ändert Chrome die Hintergrundfarbe zu einer blassgelben 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 fast unsichtbaren weißen Text. Sobald das Feld fokussiert ist, werden die Felder wieder normal angezeigt.

Ist es möglich, zu verhindern, dass Chrome die Farbe dieser Felder ändert?


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

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

So dass es wie eine Bootstrap-Eingabe aussieht.


Das funktioniert für mich.

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


Das ist meine Lösung, ich habe Übergangs- und Übergangsverzögerungen 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;
}

Die bisherigen Lösungen zum Hinzufügen eines Box-Shadows funktionieren gut für Leute, die einen einfarbigen Hintergrund benötigen. Die andere Lösung, einen Übergang hinzuzufügen, funktioniert, aber eine Dauer / Verzögerung einstellen zu müssen bedeutet, dass sie irgendwann wieder angezeigt werden kann.

Meine Lösung besteht darin, Keyframes zu verwenden, sodass 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;
}

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

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

Aber transparent wird hier nicht funktionieren.

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

Zusätzlich 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 in Hunderten oder Tausenden. Dies hat keinen Vorteil und könnte die Prozessorlast auf schwächere mobile Geräte verlagern. (Dies gilt auch für tatsächliche, äußere Schatten). Bei einer normalen Eingabebox von 20px Höhe wird ein "Unschärfe Radius" von 30px perfekt abgedeckt.


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


Dies wurde so konzipiert, da dieses Färbeverhalten von WebKit stammt. Es ermöglicht dem Benutzer zu verstehen, dass die Daten bereits vorgefüllt wurden. Fehler 1334

Sie könnten die automatische Vervollständigung ausschalten, indem Sie (oder auf das spezifische Formular-Steuerelement klicken):

<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 erneut funktioniert: http://code.google.com/p/chromium/issues/detail?id=46543

Dies ist ein WebKit-Verhalten.


Eine mögliche Lösung für diesen Moment ist es, einen "starken" Schatten im Inneren 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;
}  

Einfach, einfach hinzufügen,

    autocomplete="new-password"

in das Passwortfeld.


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 die Autofill von Google Chrome, aber es ist ein bisschen "Machete", nur entfernen Sie die Klasse, die Google Chrome zu diesen Eingabefeldern hinzufügen und den Wert auf "", wenn Sie nicht angezeigt werden 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);           
});

Ich habe eine bessere Lösung.

Den Hintergrund auf eine andere Farbe wie unten einzustellen, löste das Problem für mich nicht, weil ich ein transparentes Eingabefeld brauchte

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

Also habe ich ein paar andere Dinge ausprobiert und ich habe folgendes herausgefunden:

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

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

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

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

Siehe CODEPEN


Keine der Lösungen funktionierte für mich, der eingesetzte Schatten funktioniert nicht, weil die Eingänge einen transluzenten Hintergrund haben, der über dem Hintergrund der Seite liegt.

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

Durch meine Experimente mit dem Nutzernamen 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) Setzen Sie das Passwort vor der Texteingabe. 2) Geben Sie ihnen den gleichen Namen und die gleiche 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 ihren Namen und ihre ID geben ...

Und Chrome weiß nicht, was passiert ist ... 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 keine der oben genannten Lösungen 2016 für mich funktioniert (ein paar Jahre nach der Frage)

Also 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 Grunde wird das Tag gelöscht, während der Wert gespeichert und neu erstellt wird. Anschließend wird der Wert zurückgegeben.


Probieren Sie Folgendes aus: Wie bei @ oben mit kleinen Ä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;
}

Probieren Sie dies aus, um den AutoFill-Stil zu verbergen

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

Verwenden Sie dies und überprüfen Sie, ob Ihr Problem behoben ist

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly> 

Wenn Sie die Funktion zur automatischen Vervollständigung beibehalten möchten, können Sie ein wenig jQuery verwenden, um das Styling von Chrome zu 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);
    });
});}