Rimozione del colore di sfondo dell’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 su cui sto lavorando usa un testo chiaro su uno sfondo scuro, quindi questo mette davvero in crisi l’aspetto del modulo: ho scatole gialle e quasi invisibili. Una volta focalizzato il campo, i campi tornano alla normalità.

È ansible interrompere Chrome cambiando il colore di questi campi?

Funziona bene, puoi cambiare gli stili delle caselle di input e gli stili di testo all’interno della casella di input:

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

Ma transparent non funzionerà qui.

 /* Change the white to any color ;) */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; } 

Inoltre, puoi usare questo 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 a centinaia o migliaia. Questo non ha alcun vantaggio e potrebbe caricare il processore su dispositivi mobili più deboli. (Anche vero per le ombre esterne effettive). Per una normale casella di input di 20px height, 30px ‘blur radius’ la coprirà perfettamente.

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; 

Così ho provato alcune altre cose e mi sono inventato questo:

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

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

La mia soluzione è usare i fotogrammi chiave, in questo modo mostrerà sempre i colors che preferisci.

 @-webkit-keyframes autofill { to { color: #666; background: transparent; } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } 

Questa è la mia soluzione, ho usato la transizione e il ritardo di transizione quindi posso avere uno sfondo trasparente sui 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 in quanto questo comportamento colorante è stato da WebKit. Permette all’utente di capire che i dati sono stati precompilati. Bug 1334

È ansible distriggersre il completamento automatico facendo (o sul controllo del modulo specifico:

 
...

Oppure puoi cambiare il colore della compilazione automatica facendo:

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

Tieni presente che un bug viene monitorato perché funzioni nuovamente: http://code.google.com/p/chromium/issues/detail?id=46543

Questo è un comportamento WebKit.

Una ansible soluzione per il momento è impostare un’ombra interna “forte”:

 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 hide 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 hanno i loro difetti. Il codice seguente è una fusione di due delle risposte di cui sopra che funziona perfettamente senza battito di ciglia.

 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 ricerca sembra che Google sostituisca comunque il colore giallo, ma io per la correzione. Giusto. funzionerà anche per hover, focus ecc. tutto quello che devi fare è aggiungere! importante ad esso.

  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

Se si desidera mantenere intatta la funzionalità di completamento automatico, è ansible utilizzare un po ‘di jQuery per rimuovere lo stile di Chrome. Ho scritto un breve post su questo 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); }); });} 

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

Altrimenti, quando si fa clic sull’input, il colore giallo tornerà. Per lo stato attivo, se si utilizza il bootstrap, la seconda parte è per il bordo che evidenzia 0 0 8px rgba (82, 168, 236, 0,6);

In modo che assomigli ad ogni input di 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 puro CSS. 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; } 

Ho sviluppato un’altra soluzione utilizzando JavaScript senza JQuery. Se trovi questo utile o decidi di ripubblicare 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. Semplicemente cambiando il valore del campo di input non è sufficiente, Chrome vuole un evento. Concentrandosi su ogni campo di input (testo, password), possiamo inviare un evento tastiera (la lettera 'a') e quindi impostare il valore del testo sul suo stato precedente (il testo riempito automaticamente). Tieni presente che questo codice verrà eseguito in ogni browser e controllerà ogni campo di input all'interno della pagina Web, regolandolo in base alle tue esigenze.

Prova questo: lo stesso di @ risposta Nathan-bianco 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; } 

Per coloro che stanno usando 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); } } } } 

L’aggiunta di un ritardo di un’ora metterebbe in pausa le eventuali modifiche css sull’elemento di input.
Questo è molto meglio piuttosto che aggiungere un’animazione di transizione o un’ombra interiore.

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

Ho una soluzione se vuoi impedire l’autofill da google chrome ma è un po ‘”machete”, basta rimuovere la class che google chrome aggiunge a quei campi di input e imposta il valore a “” se non hai bisogno di 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 ( Rimozione del colore di sfondo dell’input per il completamento automatico di Chrome? ) (Mi piacerebbe cambiare la sua soluzione, ma ha ancora bisogno di 15 ripetizioni) funziona davvero bene. C’è davvero una grande differenza con la maggior parte delle soluzioni ottimizzate: puoi mantenere le immagini di sfondo! Ma una piccola modifica (solo il controllo di Chrome)

E devi tenere a mente che 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 login):

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

Scusa ancora, preferirei che fosse un commento.

Se vuoi, posso inserire un link al sito dove l'ho usato.

Questo funzionerà per l’input, textarea e selezionare in normale, hover, focus e stati attivi.

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

Grazie Benjamin!

La soluzione Mootools è un po ‘più complicata, dato che non posso ottenere campi usando $('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 } 

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

Nessuna delle soluzioni ha funzionato per me, l’ombra inserita non funzionerà per me perché gli input hanno uno sfondo trasshiny sovrapposto allo sfondo della pagina.

Quindi mi sono chiesto: “In che modo Chrome determina cosa deve essere compilato automaticamente su una determinata pagina?”

“Cerca ID di input, nomi di input? Form ids? Form action?”

Attraverso la mia sperimentazione con il nome utente e gli input della password, sono stati rilevati solo due modi per far sì che Chrome non sia in grado di trovare i campi che devono essere compilati automaticamente:

1) Inserisci la password prima dell’input di testo. 2) Dare loro lo stesso nome e id … o nessun nome e id.

Una volta caricata la pagina, con javascript puoi modificare in modo dinamico l’ordine degli input sulla pagina o dare loro dynamicmente il nome e l’ID …

E Chrome non sa cosa l’ha colpito … il completamento automatico è rotto!

Pazzo hack, lo so. Ma sta funzionando per me.

Chrome 34.0.1847.116, OSX 10.7.5

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

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

Fondamentalmente, cancella il tag salvando il valore e lo ricrea, quindi ripristina il valore.

Ho una soluzione CSS pura che usa i filtri CSS.

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

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

GUARDA CODEPEN

Come accennato prima, 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; } 

Anche lo snippet di codice per cambiare il colore del testo:

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

Questo ragazzo ha un’ottima soluzione usando JS e funziona perfettamente.

Questa è una soluzione complessa per questo compito.

 (function($){ if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $('input, select').on('change focus', function (e) { setTimeout(function () { $.each( document.querySelectorAll('*:-webkit-autofill'), function () { var clone = $(this).clone(true, true); $(this).after(clone).remove(); updateActions(); }) }, 300) }).change(); } var updateActions = function(){};// method for update input actions updateActions(); // start on load and on rebuild })(jQuery) 
 *:-webkit-autofill, *:-webkit-autofill:hover, *:-webkit-autofill:focus, *:-webkit-autofill:active { /* use animation hack, if you have hard styled input */ transition: all 5000s ease-in-out 0s; transition-property: background-color, color; /* if input has one color, and didn't have bg-image use shadow */ -webkit-box-shadow: 0 0 0 1000px #fff inset; /* text color */ -webkit-text-fill-color: #fff; /* font weigth */ font-weight: 300!important; } 
    

Semplice, aggiungi,

  autocomplete="new-password" 

al campo della password.

L’agente utente di Google Chrome impedisce il CSS degli sviluppatori, quindi per modificare l’UI di autofill necessario utilizzare un’altra proprietà come questa:

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important; /*use inset box-shadow to cover background-color*/ -webkit-text-fill-color: #ffa400 !important; /*use text fill color to cover font color*/ }