Rimozione del colore di sfondo di input per il completamento automatico di Chrome?

Su un modulo su cui sto lavorando, Chrome sta compilando automaticamente i campi email e password. Questo va bene, tuttavia, Chrome cambia il colore di sfondo in un colore giallo pallido.

Il design a cui sto lavorando è l'utilizzo di testo chiaro su uno sfondo scuro, quindi questo incasina davvero l'aspetto del modulo: ho caselle gialle e testo bianco quasi invisibile. Una volta che il campo è focalizzato, i campi tornano alla normalità.

È possibile impedire a Chrome di cambiare il colore di questi campi?

Funziona bene, puoi modificare gli stili della casella di input e gli stili di testo all'interno della casella di input:

Qui puoi usare qualsiasi colore white, ad es . #DDD, rgba(102, 163, 177, 0.45).

Ma transparentnon funzionerà qui.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Inoltre, puoi usarlo per cambiare il colore del testo:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Consiglio: non utilizzare un raggio di sfocatura eccessivo tra le centinaia o le migliaia. Ciò non ha alcun vantaggio e potrebbe comportare un carico del processore su dispositivi mobili più deboli. (Vero anche per le ombre esterne effettive). Per una normale casella di input di 20 pixel di altezza, il raggio di sfocatura di 30 pixel lo coprirà perfettamente.

Le precedenti soluzioni di aggiunta di un box-shadow funzionano bene per le persone che hanno bisogno di uno sfondo a tinta unita. L'altra soluzione di aggiunta di una transizione funziona, ma dover impostare una durata / ritardo significherà che ad un certo punto potrebbe mostrare di nuovo.

La mia soluzione è utilizzare invece i fotogrammi chiave, in questo modo mostrerà sempre i colori di tua scelta.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Esempio Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Ho una soluzione migliore

Impostare lo sfondo su un altro colore come sotto non ha risolto il problema per me perché avevo bisogno di un campo di input trasparente

-webkit-box-shadow: 0 0 0px 1000px white inset;

Quindi ho provato alcune altre cose e ho pensato a questo:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

Questa è la mia soluzione, ho usato la transizione e il ritardo di transizione, quindi posso avere uno sfondo trasparente nei miei campi di input.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

Questo è stato progettato come da quando questo comportamento colorante è stato da WebKit. Consente all'utente di comprendere che i dati sono stati precompilati. Bug 1334

È possibile disattivare il completamento automatico eseguendo (o sul controllo modulo specifico:

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

Oppure puoi cambiare il colore del riempimento automatico facendo:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Nota, c'è un bug che viene rintracciato affinché funzioni nuovamente: http://code.google.com/p/chromium/issues/detail?id=46543

Questo è un comportamento WebKit.

Una possibile soluzione al momento è quella di impostare un'ombra "forte" all'interno:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}  

prova questo per nascondere lo stile di riempimento automatico

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

Tutte le risposte di cui sopra hanno funzionato ma avevano i loro difetti. Il codice seguente è una fusione di due delle risposte sopra che funziona perfettamente senza battere ciglio.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

Dopo 2 ore di ricerche sembra che Google abbia ancora la precedenza sul colore giallo, ma io per la correzione. Giusto. funzionerà anche per hover, focus ecc. tutto ciò che devi fare è aggiungere!

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

questo rimuoverà completamente il giallo dai campi di input

L'aggiunta di un'ora di ritardo metterebbe in pausa eventuali modifiche ai CSS sull'elemento di input.
È meglio piuttosto che aggiungere animazione di transizione o ombra interna.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

In aggiunta a questo:

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

Potresti anche voler aggiungere

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

Altro saggio, quando si fa clic sull'input, il colore giallo tornerà. Per lo stato attivo, se si utilizza bootstrap, la seconda parte è per l'evidenziazione del bordo 0 0 8px rgba (82, 168, 236, 0.6);

In modo tale che sembrerà qualsiasi input bootstrap.

Ho avuto un problema in cui non potevo usare box-shadow perché avevo bisogno che il campo di input fosse trasparente. È un po 'un trucco ma CSS puro. Imposta la transizione su un periodo di tempo molto lungo.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

Prova questo: uguale alla risposta @ Nathan-white sopra con piccole modifiche.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

Se vuoi mantenere intatta la funzionalità di completamento automatico puoi usare un po 'di jQuery per rimuovere lo stile di Chrome. Ho scritto un breve post al riguardo qui: 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);
    });
});}

Ho sviluppato un'altra soluzione utilizzando JavaScript senza JQuery. Se lo trovi utile o decidi di inviare nuovamente la mia soluzione, ti chiedo solo di includere il mio nome. Godere. - Daniel Fairweather

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

Questo codice si basa sul fatto che Google Chrome rimuove lo stile Webkit non appena viene inserito del testo aggiuntivo. La semplice modifica del valore del campo di input non è sufficiente, Chrome vuole un evento. Concentrandosi su ciascun campo di input (testo, password), possiamo inviare un evento da tastiera (la lettera 'a') e quindi impostare il valore del testo sul suo stato precedente (il testo compilato automaticamente). Tieni presente che questo codice verrà eseguito in ogni browser e controllerà tutti i campi di input all'interno della pagina Web, adattandolo di conseguenza alle tue esigenze.

Ho una soluzione CSS pura che utilizza filtri CSS.

filter: grayscale(100%) brightness(110%);

Il filtro di scala di grigi sostituisce il giallo con il grigio, quindi la luminosità rimuove il grigio.

VEDI CODEPEN

Questo funzionerà per input, textarea e selezionare in stati normale, hover, focus e attivo.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

Ecco la versione SCSS della soluzione di cui sopra per coloro che lavorano con SASS / SCSS.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

Per coloro che utilizzano Compass:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

Mi arrendo!

Dato che non c'è modo di cambiare il colore dell'input con il completamento automatico, decido di disabilitarli tutti con jQuery per i browser webkit. Come questo:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Ho una soluzione se vuoi impedire il riempimento automatico da Google Chrome ma è un po '"machete", basta rimuovere la classe che Google Chrome aggiunge a quei campi di input e impostare il valore su "" se non è necessario mostrare memorizzare i dati dopo il caricamento.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

La soluzione di Daniel Fairweather ( Rimuovere il colore di sfondo di input per il completamento automatico di Chrome? ) (Mi piacerebbe migliorare la sua soluzione, ma ho ancora bisogno di 15 rep) funziona davvero bene. C'è una differenza davvero enorme con la soluzione più votata: puoi conservare le immagini di sfondo! Ma una piccola modifica (solo controllo Chrome)

E devi tenere a mente, funziona SOLO su campi visibili !

Quindi se stai usando $ .show () per il tuo modulo, devi eseguire questo codice dopo l'evento show ()

La mia soluzione completa (ho un pulsante mostra / nascondi per il modulo di accesso):

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

Scusami ancora, preferirei che fosse un commento.

Se vuoi, posso mettere un link al sito in cui l'ho usato.

e questo ha funzionato per me (testato Chrome 76)

input:-internal-autofill-selected {
    background-color: transparent;
}

Ho provato quasi tutte le soluzioni di cui sopra. Niente funziona per me. Finalmente ha lavorato con questa soluzione. Spero che qualcuno lo aiuti.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Grazie Benjamin!

La soluzione Mootools è un po 'più complicata, poiché non riesco a ottenere i campi utilizzando $('input:-webkit-autofill'), quindi quello che ho usato è il seguente:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

Nessuna delle soluzioni ha funzionato per me, l'ombra dell'inser non funzionerà per me perché gli input hanno uno sfondo traslucido sovrapposto allo sfondo della pagina.

Quindi mi sono chiesto: "In che modo Chrome determina cosa deve essere compilato automaticamente in una determinata pagina?"

"Cerca ID di input, nomi di input? ID di modulo? Azione modulo?"

Attraverso la mia sperimentazione con il nome utente e gli input della password, ho trovato solo due modi per impedire a Chrome di trovare i campi da compilare automaticamente:

1) Inserire l'inserimento della password prima dell'inserimento del testo. 2) Dai loro lo stesso nome e id ... o nessun nome e id affatto.

Dopo che la pagina è stata caricata, con javascript puoi cambiare dinamicamente l'ordine degli input nella pagina o dare loro dinamicamente il loro nome e id ...

E Chrome non sa cosa l'ha colpito ... il completamento automatico è rotto!

Pazzo hack, lo so. Ma funziona per me.

Chrome 34.0.1847.116, OSX 10.7.5

Sfortunatamente nessuna delle soluzioni sopra menzionate ha funzionato per me nel 2016 (un paio di anni dopo la domanda)

Ecco quindi la soluzione aggressiva che utilizzo:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

Fondamentalmente, elimina il tag durante il salvataggio del valore e lo ricrea, quindi ripristina il valore.

lo uso. lavora per me. rimuove lo sfondo giallo del campo.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

Come accennato in precedenza, l'inset -webkit-box-shadow per me funziona meglio.

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

Inoltre snippet di codice per cambiare il colore del testo:

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

Questo ha funzionato per me:

padding: 5px;
background-clip: content-box;