Wie kann ich verhindern, dass Chrome die Eingabefelder meiner Website vergilbt?

Neben anderen Text- und visuellen Hilfsmitteln bei der Übermittlung eines Formulars nach der Validierung färbe ich meine Eingabefelder rot, um den interaktiven Bereich zu kennzeichnen, der Aufmerksamkeit erfordert.

In Chrome (und für Benutzer der Google Toolbar) färbt die Funktion zum automatischen Ausfüllen meine Eingabeformulare neu. Hier ist das komplexe Problem: Ich möchte, dass die automatische Vervollständigung in meinen Formularen zulässig ist, da dies die Anmeldung von Benutzern beschleunigt. Ich werde prüfen, ob das Attribut für die automatische Vervollständigung deaktiviert werden kann, wenn ein Fehler ausgelöst wird, aber es ist komplex Bit der Codierung, um die automatische Vervollständigung für die einzelne betroffene Eingabe auf einer Seite programmgesteuert auszuschalten. Dies wäre, um es einfach auszudrücken, ein großes Problem.

Gibt es eine einfachere Methode, um zu verhindern, dass Chrome die Eingabefelder neu einfärbt, um dieses Problem zu vermeiden?

[bearbeiten] Ich habe den! wichtigen Vorschlag unten ausprobiert und er hatte keine Wirkung. Ich habe die Google Toolbar noch nicht überprüft, um festzustellen, ob das Attribut! Important dafür geeignet ist.

Soweit ich das beurteilen kann, gibt es keine andere Möglichkeit als das Autocomplete-Attribut (das anscheinend funktioniert).

Ich weiß, dass Sie in Firefox das Attribut autocomplete = "off" verwenden können, um die Autocomplete-Funktionalität zu deaktivieren. Wenn dies in Chrome funktioniert (noch nicht getestet), können Sie dieses Attribut festlegen, wenn ein Fehler auftritt.

Dies kann für beide Elemente verwendet werden

<input type="text" name="name" autocomplete="off">

... sowie für eine ganze Form

<form autocomplete="off" ...>

Setzen Sie die CSS-Gliederungseigenschaft auf none.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

In Fällen, in denen der Browser möglicherweise auch eine Hintergrundfarbe hinzufügt, kann dies durch Folgendes behoben werden

:focus { background-color: #fff; }

Genau das suchen Sie!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Mit etwas jQuery können Sie das Styling von Chrome entfernen und gleichzeitig die Autocomplete-Funktionalität beibehalten. 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);
    });
});}

Um den Rahmen für alle Felder zu entfernen, können Sie Folgendes verwenden:

*:focus { outline:none; }

Um den Rahmen für ausgewählte Felder zu entfernen, wenden Sie diese Klasse einfach auf die gewünschten Eingabefelder an:

.nohighlight:focus { outline:none; }

Sie können die Grenze natürlich auch nach Ihren Wünschen ändern:

.changeborder:focus { outline:Blue Solid 4px; }

(Von Bill Beckelman: Überschreiben Sie den automatischen Rand von Chrome um aktive Felder mithilfe von CSS. )

Ja, es wäre ein großer Kopfschmerz, der meiner Meinung nach die Rückkehr nicht wert ist. Vielleicht könnten Sie Ihre UI-Strategie ein wenig optimieren und anstatt die Box rot zu färben, könnten Sie die Ränder rot färben oder eine kleine Bürokratie daneben legen (wie das Gmails-Band "Laden"), das ausgeblendet wird, wenn sich die Box befindet Fokus.

Mit jQuery ist das ein Kinderspiel:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

Oder wenn Sie etwas selektiver sein möchten, fügen Sie einen Klassennamen für einen Selektor hinzu.

Der einfachere Weg ist meiner Meinung nach:

1. Holen Sie sich http://www.quirksmode.org/js/detect.html

2. Verwenden Sie diesen Code:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };

Nachdem ich @Benjamin seine Lösung angewendet hatte, stellte ich fest, dass das Drücken der Zurück-Taste mir immer noch das gelbe Highlight geben würde.

Meine Lösung irgendwie diese gelbe Markierung zu verhindern , zurückzukommen ist durch die folgende jQuery Javascript Anwendung:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

Hoffe es hilft jedem !!

Das funktioniert. Das Beste ist, dass Sie rgba-Werte verwenden können (der Box-Shadow-Inset-Hack funktioniert nicht mit rgba). Dies ist eine kleine Änderung von @ Benjamins Antwort. Ich verwende $ (document) .ready () anstelle von $ (window) .load (). Es scheint besser für mich zu funktionieren - jetzt gibt es viel weniger FOUC. Ich glaube nicht, dass die Verwendung von $ (document) .ready () Vor- und Nachteile hat.

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};

Für die heutigen Versionen funktioniert dies auch, wenn es in einer der beiden Login-Eingaben platziert wird. Beheben Sie auch das Problem mit Version 40+ und spätem Firefox.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

Das hat für mich großartig funktioniert, aber es ist mehr als wahrscheinlich, dass die Dinge auf Ihrer Website einheitlich bleiben. Sie möchten dies auch in Ihr CSS für Textbereiche aufnehmen:

textarea:focus { outline:none; }

Auch mag es den meisten offensichtlich erscheinen, aber für Anfänger können Sie es auch auf eine Farbe als solche einstellen:

input:focus { outline:#HEXCOD SOLID 2px ; }

Wenn ich mich richtig erinnere, überschreibt eine wichtige Regel im Stylesheet für die Hintergrundfarbe der Eingaben die automatische Vervollständigung der Google-Symbolleiste - vermutlich gilt dies auch für Chrome.