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).
quelle
Antworten:
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
... sowie für eine ganze Form
quelle
<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
Setzen Sie die CSS-Gliederungseigenschaft auf none.
In Fällen, in denen der Browser möglicherweise auch eine Hintergrundfarbe hinzufügt, kann dies durch Folgendes behoben werden
quelle
:focus { background-color: #fff; }
input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
Genau das suchen Sie!
quelle
input:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF 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/
quelle
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. )
quelle
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.
quelle
Mit jQuery ist das ein Kinderspiel:
Oder wenn Sie etwas selektiver sein möchten, fügen Sie einen Klassennamen für einen Selektor hinzu.
quelle
Der einfachere Weg ist meiner Meinung nach:
Verwenden Sie diesen Code:
quelle
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:
Hoffe es hilft jedem !!
quelle
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.
quelle
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.
quelle
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:
Auch mag es den meisten offensichtlich erscheinen, aber für Anfänger können Sie es auch auf eine Farbe als solche einstellen:
quelle
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.
quelle