Überschreiben Stil des gespeicherten Passwort-Feld in google chrome

Ich bin der Gestaltung einer web-Anwendung und dem Allgemeinen Stil beinhaltet den weißen text auf einem dunklen hintergrund.

Dieser Stil beinhaltet die Verwendung einer benutzerdefinierten (dunkles) Bild für die Felder Benutzername und Kennwort, mit weißem text.

Wenn sich Benutzer anmelden mit google chrome, und wählen Sie speichern Ihre login-Daten für das Formular auf den nächsten Besuch der Benutzername und das Kennwort in den entsprechenden Feldern erscheinen als blasse gelb mit weißem text, so dass es fast unmöglich zu Lesen. Das sieht wirklich schlimm.

Wie würde ich mich über das überschreiben dieser Stil, verhindern, dass google chrome ändern des Hintergrunds der gespeicherten Benutzernamen-und Kennwort-Felder.

<style type="text/css">
  input {
    border: none;
    background: url('darkinput.png');
    color: #fff;
  }
</style>

<input type="text" name="email" id="text" /> 
<input type="password" name="password" id="text" />

EDIT: Derzeit (google-chrome v11.0.696.57) die user-agent-stylesheets enthalten !wichtig außer Kraft gesetzt beide der folgenden Schritte aus:

input:-webkit-autofill{
  background-color: rgb(250, 255, 189) !important;
  background-image: none !important;
}

Gibt es ein Problem berichten, für das Sie auf die url unten, und ich ermutige jeden, der dieses liest, zu Stimmen:

http://code.google.com/p/chromium/issues/detail?id=46543

InformationsquelleAutor Matthew | 2011-06-08

  1. 8

    Vollständig zu deaktivieren auto-vervollständigen (und deshalb das entfernen der style-Ausgabe) können Sie versuchen, diese:

    <form autocomplete="off">
...
</form>

    Jedoch eine andere Möglichkeit wäre die Verwendung von jquery entfernen, den Stil nach dem laden der Seite.

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

    InformationsquelleAutor Creativehavoc

  2. 1

    Bitte überschreiben Sie die Standard-css, das ist

    input:-webkit-autofill {
  background-color: #FAFFBD !important;
  background-image:none !important;
  color: #000000 !important;
}
    Dies funktioniert, um den text lesbar. Leider scheint es unmöglich zu sein, um die hintergrund-Farbe oder ein hintergrund-Bild (sogar mit !wichtig), weil der user-agent-stylesheet für chrome hat die background-color und background-image bereits mit !wichtig.
    Versuchen !wichtig!!!!wichtig. Es könnte funktionieren.
    Matthäus hat Recht, mit dem snippet meiner Antwort löst diese, ohne Sie zu verwenden !wichtig. Ich bin überschreiben eine andere Eigenschaft, aber das Endergebnis ist das, was wir erwarten. Ein weißer bg!

    InformationsquelleAutor Wolfgang Kuehn

  3. 1

    Zurücksetzen die Stile:

    input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

    dieser arbeitete für mich.

    InformationsquelleAutor mezod

  4. 1

    Nur die Einstellung ein Schatten Update:

    input:-webkit-autofill { -webkit-box-shadow:200px 200px 100px white inset; box-shadow:200px 200px 100px white inset; }

    InformationsquelleAutor n1kkou

Schreibe einen Kommentar