Entfernen der Hintergrundfarbe von Eingaben für die Chrome-Autovervollständigung?

Question

In einem Formular, an dem ich gerade arbeite, füllt Chrome die Felder für E-Mail und Kennwort automatisch aus. Das ist in Ordnung, aber Chrome ändert die Hintergrundfarbe in ein helles Gelb.

Das Design, an dem ich arbeite, verwendet hellen Text auf dunklem Hintergrund, so dass dies das Aussehen des Formulars wirklich durcheinander bringt - ich habe starke gelbe Kästchen und fast unsichtbaren weißen Text. Sobald das Feld fokussiert ist, werden die Felder wieder normal angezeigt.

Ist es möglich, Chrome davon abzuhalten, die Farbe dieser Felder zu ändern?

Answer 1

input:-webkit-autofill {
    border: none;
    border-radius: .3rem;
    caret-color: #fff; /* Pour le I quand on édite */
    color: #fff;
    background: #292a2d;
    /* webkit autofill */
    -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
    -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
    box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

Answer 2

Obwohl die Lösungen, die in vielen Antworten zu finden sind, in Chrom arbeiten sie nicht in Safari für Mac und iOS .

Safari erfordert eine zusätzliche Erklärung - background-clip .

Dies ist der vollständige Code für eine Lösung, die in allen gängigen Browsern auf verschiedenen Plattformen funktioniert:

/* Disable autofill highlighting */
input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-input-color) !important;
    -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
    background-clip: content-box !important;
}

(Bitte ändern Sie die --text-input-color y --page-background-color mit Ihren eigenen Werten).

Answer 3

Wie bereits erwähnt, funktioniert "inset -webkit-box-shadow" bei mir am besten.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

Außerdem ein Codeschnipsel zum Ändern der Textfarbe:

input:-webkit-autofill:first-line {
     color: #797979;
}

Answer 4

Wir haben ein Szenario, in dem wir ein Kontrollkästchen zum Aktivieren oder Deaktivieren von Eingabefeldern haben.

Wenn das Kontrollkästchen aktiviert ist, werden die Felder deaktiviert. Sobald das Kontrollkästchen deaktiviert ist, werden die Eingabefelder aktiviert. Wir können die Autofill-Funktion von Chrome verwenden, um diese Felder auszufüllen, z. B. die Adresse und alles andere.

Wenn Sie das Kontrollkästchen zum automatischen Ausfüllen wieder anklicken, werden die Eingabefelder deaktiviert, aber Chrome fügt den Hintergrund zu den Feldern hinzu, die mit dem automatischen Ausfüllen ausgefüllt wurden In meinem Fall waren das die Felder Stadt, Bundesland und Postleitzahl

um die Transparenz in deaktivierten Eingabefeldern beizubehalten, musste ich Folgendes tun

input:disabled:-webkit-autofill,
input:disabled:-webkit-autofill:hover, 
input:disabled:-webkit-autofill:focus, 
input:disabled:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text;
    color: white !important;
}

Answer 5

Verwenden Sie dies und überprüfen Sie, ob Ihr Problem gelöst ist

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>