Google Chrome forma il riempimento automatico e il suo sfondo giallo

Ho un problema di progettazione con Google Chrome e la sua funzione di riempimento automatico del modulo. Se Chrome ricorda alcuni login / password, cambia un colore di sfondo in uno giallo.

Ecco alcuni screenshot:

Come rimuovere quello sfondo o semplicemente disabilitare questo riempimento automatico?

Cambia "bianco" con qualsiasi colore tu voglia.

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

Se volete campi di input trasparenti, potete utilizzare il ritardo di transizione e transizione.

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

Soluzione qui :

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

In Firefox è possibile disabilitare tutti i completamenti automatici in un modulo utilizzando l'attributo completamento automatico = "off / on". Allo stesso modo è possibile impostare il completamento automatico dei singoli elementi utilizzando lo stesso attributo.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Puoi testarlo in Chrome come dovrebbe funzionare.

Se desideri conservare il riempimento automatico, nonché tutti i dati, i gestori collegati e le funzionalità associate ai tuoi elementi di input, prova questo script:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Esegue il polling fino a quando non trova elementi di riempimento automatico, li clona inclusi dati ed eventi, quindi li inserisce nel DOM nella stessa posizione e rimuove l'originale. Smette di eseguire il polling quando trova qualcuno da clonare poiché il riempimento automatico a volte impiega un secondo dopo il caricamento della pagina. Questa è una variante di un precedente esempio di codice, ma più robusta e mantiene intatta la maggior funzionalità possibile.

(Confermato che funziona in Chrome, Firefox e IE 8.)

Il CSS seguente rimuove il colore di sfondo giallo e lo sostituisce con un colore di sfondo di tua scelta. Non disabilita il riempimento automatico e non richiede hack jQuery o Javascript.

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

Soluzione copiata da: sovrascrive la compilazione del modulo del browser e l'evidenziazione dell'input con HTML / CSS

Ha funzionato per me, è richiesto solo il cambio CSS.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

puoi mettere qualsiasi colore al posto di #ffffff .

Un po 'confuso ma funziona perfettamente per me

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

Una combinazione di risposte ha funzionato per me

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Ecco la versione MooTools di Jason's. Risolve anche in Safari.

window.addEvent('domready',function() { 
    $('username').focus();

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

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

Questo risolve il problema su Safari e Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Questo mi ha aiutato, una versione solo CSS.

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

dove il bianco può essere di qualsiasi colore tu voglia.

Io lo uso

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

Nel tuo tag, inserisci semplicemente questa piccola riga di codice.

autocomplete="off"

Tuttavia, non inserirlo nel campo username / email / idname perché se stai ancora cercando di utilizzare il completamento automatico, lo disabiliterà per questo campo. Ma ho trovato un modo per aggirare questo, semplicemente inserire il codice nel tag di immissione della password perché non si completano mai automaticamente le password. Questa correzione dovrebbe rimuovere la forza del colore, l'abilità di completamento automatico del matinain sul campo e-mail / nome utente e ti consente di evitare hack ingombranti come Jquery o javascript.

Se vuoi sbarazzartene completamente, ho modificato il codice nelle risposte precedenti in modo che funzioni su hover, active e focus:

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

Ecco una soluzione Mootools che fa lo stesso di Alessandro: sostituisce ogni input interessato con uno nuovo.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

Che dire di quella soluzione:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Disattiva il completamento automatico e il riempimento automatico (quindi scompaiono gli sfondi gialli), attende 100 millisecondi e quindi ripristina la funzionalità di completamento automatico senza riempimento automatico.

Se hai input che devono essere compilati automaticamente, dai loro la auto-complete-onclasse css.

Nessuna delle soluzioni ha funzionato per me, gli input di nome utente e password erano ancora popolati e con lo sfondo giallo.

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.

Dopo il caricamento della pagina, con javascript puoi cambiare 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 rimane spento.

Pazzo hack, lo so. Ma funziona per me.

Chrome 34.0.1847.116, OSX 10.7.5

L'unico modo per me era: (richiesto jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Ho risolto questo problema per un campo password che ho così:

Impostare il tipo di input su testo anziché su password

Rimuovere il valore del testo di input con jQuery

Converti il ​​tipo di input in password con jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Un aggiornamento alla soluzione Arjans. Quando provi a cambiare i valori non te lo permetterebbe. Questo funziona bene per me. Quando ti concentri su un input, diventerà giallo. è abbastanza vicino.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

Prova questo codice:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

la risposta è stata corretta. Ma lo sfondo diventa ancora giallo quando viene selezionato l'input . Aggiunta !importantrisolve il problema. Se vuoi anche textareae selectcon lo stesso comportamento, aggiungitextarea:-webkit-autofill, select:-webkit-autofill

Solo input

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

input, seleziona, textarea

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

L'aggiunta autocomplete="off"non lo taglierà.

Cambia l'attributo del tipo di input in type="search".
Google non applica il riempimento automatico agli input con un tipo di ricerca.

Spero che questo ti faccia risparmiare un po 'di tempo.

Se vuoi evitare lo sfarfallio giallo fino a quando il tuo CSS non viene applicato schiaffeggia una transizione su quel cattivo ragazzo in questo modo:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

L'ultima soluzione:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

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

Domanda simile: Link

Mi sono appena trovato con la stessa domanda. Questo funziona per me:

form :focus {
  outline: none;
}