Wie verhindere ich, Chrome meiner Website Eingabefelder ein Vergilben?

Question

Unter anderem Text und visuellen Hilfsmittel auf einem Formular Vorlage, post-Validierung, ich meine Eingabefelder Rotfärbung den interaktiven Bereich, um anzuzeigen, die Aufmerksamkeit benötigen.

Auf Chrome (und für Google Toolbar-Benutzer) die Auto-Fill-Funktion Wieder Farben meiner Eingabe gelb bildet. Hier ist die komplexe Frage. Ich automatische Vervollständigung auf meine Formen erlaubt wollen, wie es beschleunigt in Benutzer anmelden Ich werde in die Fähigkeit zu überprüfen, die die automatische Vervollständigung Attribut auszuschalten, wenn / falls es ein Fehler ausgelöst, aber es ist eine komplexe Bit-Codierung zu deaktivieren, um programmatisch die automatische Vervollständigung für den einzelnen betroffenen Eingang auf einer Seite. Dies, um es einfach auszudrücken, wäre ein großer Kopfschmerzen sein.

So zu versuchen, dieses Problem zu vermeiden, gibt es eine einfachere Methode zum Anhalten Chrome von Umfärbung der Eingabefelder?

[Bearbeiten] Ich habe versucht, die! Important Vorschlag unten und es hatte keine Wirkung. Ich habe noch nicht überprüft Google Toolbar, um zu sehen, ob das! Wichtige Attribut für das funktionieren würde.

Soweit ich das beurteilen kann, ist es keine andere Mittel als das die automatische Vervollständigung Attribut (die zur Arbeit erscheinen).

Answer 1

Ich weiß, in Firefox können Sie das Attribut der automatischen Vervollständigung verwenden = „off“, um die Funktionalität der automatischen Vervollständigung zu deaktivieren. Wenn dies in Chrome funktioniert (nicht getestet), können Sie dieses Attribut gesetzt, wenn ein Fehler auftritt.

Dies kann sowohl für ein einzelnes Element verwendet wird

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

... sowie für eine ganze Form

<form autocomplete="off" ...>

Answer 2

Stellen Sie die CSS-Umriss-Eigenschaft auf keine.

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

In Fällen, in denen der Browser als auch eine Hintergrundfarbe kann dies wie

von etwas fixiert werden

:focus { background-color: #fff; }

Answer 3

das ist genau das, was Sie suchen!

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

Answer 4

Mit ein bisschen jQuery verwenden, können Sie Chrome Styling entfernen, während die Funktionalität der automatischen Vervollständigung intakt zu halten. Ich schrieb einen kurzen Beitrag über sie hier: http://www.benjaminmiles.com/2010 / 11/22 / Befestigungs-google-chromes-gelb-Autocomplete-Stil-mit-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);
    });
});}

Answer 5

Um die Grenze für alle Felder entfernen Sie die folgende verwenden:

*:focus { outline:none; }

, um die Grenze entfernen für ausgewählte Felder nur diese Klasse auf die Felder Eingang anwenden Sie:

.nohighlight:focus { outline:none; }

Sie können natürlich die Grenze ändern, wie Sie auch wünschen:

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

(Von Bill Beckelman: außer Kraft setzen Chrome Automatische Rahmen um Aktive Felder mit CSS )

Answer 6

Ja, es wäre ein großen Kopfschmerzen, die meiner Meinung nach ist nicht wert, die Rückkehr. Vielleicht könnten Sie Ihre UI-Strategie ein wenig zwicken, und stattdessen das Feld rot zu färben, können Sie die Grenzen rote Farbe oder ein kleines rotes Band daneben setzen (wie die Gmails „Loading“ Band), die abklingt, wenn die Box in konzentrieren.

Answer 7

Es ist ein Stück des Kuchens mit jQuery:

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

Oder wenn Sie ein bisschen mehr selektiv sein wollen, fügen Sie einen Klassennamen für einen Selektor.

Answer 8

Die einfachere Art und Weise meiner Meinung nach ist:

1. Get http://www.quirksmode.org/js/detect.html

2. Mit diesem Code:

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

Answer 9

Nach der Anwendung @Benjamin seine Lösung fand ich heraus, dass die Zurück-Taste noch die gelbe Markierung geben würde mir drücken.

Meine Lösung irgendwie diese gelbe Markierung zu verhindern ist, wieder zu kommen, indem 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, dass es jemand hilft !!

Answer 10

Das funktioniert. Best of all, können Sie rgba Werte (die box-shadow Einsatz Hack funktioniert nicht mit rgba) verwenden. Dies ist eine leichte zwicken von @ Benjamin Antwort. Ich bin mit $ (document) .ready () anstelle von $ (Fenster) .load (). Es scheint für mich, besser zu arbeiten - jetzt gibt es viel weniger FOUC. Ich glaube nicht, es gibt auch Nachteile mit $ (document) .ready ().

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

Answer 11

für die Versionen der heutigen Dies funktioniert auch, wenn in einem der beiden Eingänge Login platziert. Auch fixiert die Version 40+ und spät Firefox Ausgabe.

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

Answer 12

input:focus { outline:none; }

Das ist für mich großartig gearbeitet, aber mehr als wahrscheinlich Dinge einheitlich auf Ihrer Website halten Ihre wollen gehen, um auch diese in Ihrem CSS für Textbereiche:

textarea:focus { outline:none; }

Auch kann es offensichtlich scheinen die meisten, aber für Anfänger können Sie auch auf eine Farbe setzen es als solches:

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

Answer 13

Wenn ich mich richtig erinnere, eine wichtige Regel im Stylesheet für die Hintergrundfarbe der Eingänge wird die Google Toolbar zur automatischen Vervollständigung außer Kraft setzen -. Vermutlich das gleiche gilt für Chrome würde