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

151

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

Dave Rutledge
quelle
1
Dies ist nicht nur ein Problem in Chrome. Die Google Toolbar für andere Browser führt die gleiche "Vergilbung" der Eingabefelder durch.
Carlton Jenke
2
Ich habe eine Antwort für Sie bereitgestellt, die unten funktioniert.
John Leidegren
8
Ich verstehe nicht, warum alle über Gliederung sprechen: keine, die Frage bezieht sich auf den gelben Hintergrund, NICHT auf die Gliederung. Und das auf deaktiviert eingestellte Autocomplete-Attribut behebt das Problem NICHT, da Davebug sagte, er möchte, dass die Autocomplete funktioniert, nur nicht der gelbe Hintergrund.

Antworten:

74

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" ...>
Ben Hoffstein
quelle
"Ich werde prüfen, ob das Autocomplete-Attribut deaktiviert werden kann, wenn ein Fehler ausgelöst wird. Es ist jedoch eine komplexe Codierung, die automatische Vervollständigung für die einzelne Eingabe auf einer Seite programmgesteuert zu deaktivieren."
Dave Rutledge
Heh ... ja, danke, obwohl ich wohl noch in Chrome einchecken muss, oder?
Dave Rutledge
2
für Leute mit Schienen einfache Form<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
Carbonr
Es tut mir leid zu sagen, dass mir das nicht geholfen hat
M.Islam
136

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; }
John Leidegren
quelle
9
Hintergrund? Mir war nicht bewusst, dass Chrome auch eine Hintergrundfarbe hinzugefügt hat? Wenn ja, kann das durch so etwas wie:focus { background-color: #fff; }
John Leidegren
Das Töten der Gliederung mit CSS verhindert möglicherweise die Vergilbung, verhindert jedoch nicht das tatsächliche automatische Ausfüllen. Wenn Sie dies tun möchten, ist es wichtig, das nicht standardmäßige oder nicht standardmäßige Attribut für die automatische Vervollständigung zu verwenden.
Tom Boutell
2
@ Pestaa richtig, dies ist nicht die richtige Antwort, aber es löst sicherlich ein ähnliches Problem
David Lawson
Seien Sie vorsichtig beim Umgang mit Tablets und anderen Dingen. Der Standard-Android-Browser ist ohne die Gliederung etwas schwierig zu verwenden . Einfach genug, um auf nicht mobile Browser angewendet zu werden :)
Tim Post
Eine kleine Verbesserung: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
Felipe Lima
56

Genau das suchen Sie!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}
JStormThaKid
quelle
Das ist ein großartiger Hack. Danke
Jason
Ich würde mich auch darauf konzentrieren: Dinput:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
StephanieQ
Hallo @JStormThaKid, ich habe dies verwendet ..., aber nicht für korrekte Eingaben gearbeitet ... bitte beantworten Sie diese ...
Mithu
Vielen Dank für die Beantwortung der Frage, die er tatsächlich gestellt hat! Ich hatte fast angefangen, die Hoffnung zu verlieren.
BVernon
Beste Antwort hier, ich wollte immer noch Google Autocomplete, also danke
Spangle
14

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);
    });
});}
Benjamin
quelle
Danke für den Tipp! Nachdem Sie das Formular gesendet und auf die Schaltfläche "Zurück" geklickt haben, wurde die gelbe Markierung wieder angezeigt. Ich habe Ihr Snippet (siehe meine Antwort) erweitert, um dies abzudecken.
321X
+1 @Benjamin schöne Lösung, es blinkt ein wenig gelb, aber es repariert am Ende;)
itsme
7

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

Kita
quelle
2

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.

Meistens harmlos
quelle
1

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.

hohner
quelle
1

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');
    };
Tim
quelle
1

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 !!

321X
quelle
1

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);
        });
    });
};
Vin
quelle
1

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');" />
hsobhy
quelle
0
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 ; }
NewFangSol
quelle
-1

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.

QUentin
quelle