Come posso impedire a Chrome di ingiallire le caselle di input del mio sito?

Tra gli altri aiuti visivi e di testo sull’invio di un modulo, post-validazione, sto colorando le mie caselle di input in rosso per indicare l’area intertriggers che richiede attenzione.

Su Chrome (e per gli utenti di Google Toolbar) la funzione di riempimento automatico ricolora i moduli di input in giallo. Ecco il problema complesso: desidero il completamento automatico consentito sui miei moduli, in quanto accelera gli utenti che accedono. Vado a verificare la possibilità di distriggersre l’attributo del completamento automatico se / quando si verifica un errore, ma è un complesso bit di codifica per distriggersre a livello di codice il completamento automatico per il singolo input interessato su una pagina. Questo, per dirla semplicemente, sarebbe un grosso mal di testa.

Quindi, per cercare di evitare questo problema, esiste un metodo più semplice per fermare Chrome dal ridigitare le caselle di input?

[modifica] Ho provato il suggerimento importante qui sotto e non ha avuto alcun effetto. Non ho ancora controllato Google Toolbar per vedere se l’attributo! Important avrebbe funzionato per quello.

Per quanto posso dire, non ci sono altri mezzi oltre all’utilizzo dell’attributo autocomplete (che sembra funzionare).

So che in Firefox è ansible utilizzare l’attributo autocomplete = “off” per disabilitare la funzionalità di completamento automatico. Se questo funziona in Chrome (non testato), è ansible impostare questo attributo quando si verifica un errore.

Questo può essere usato sia per un singolo elemento

 

… così come per un’intera forma

 

Imposta la proprietà del profilo CSS su none.

 input[type="text"], input[type="password"], textarea, select { outline: none; } 

Nei casi in cui il browser può aggiungere un colore di sfondo, questo può essere risolto da qualcosa di simile

 :focus { background-color: #fff; } 

questo è esattamente quello che stai cercando!

 // Just change "red" to any color input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px red inset; } 

Utilizzando un po ‘di jQuery puoi rimuovere lo stile di Chrome mantenendo intatta la funzionalità di completamento automatico. 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); }); });} 

Per rimuovere il bordo per tutti i campi puoi usare quanto segue:

*:focus { outline:none; }

Per rimuovere il bordo per i campi selezionati, applica questa class ai campi di input che desideri:

.nohighlight:focus { outline:none; }

Ovviamente puoi anche cambiare il confine come preferisci:

.changeborder:focus { outline:Blue Solid 4px; }

(Da Bill Beckelman: ridefinisci il bordo automatico di Chrome intorno ai campi attivi usando i CSS )

Sì, sarebbe un grande mal di testa, che a mio parere non vale la pena il ritorno. Forse potresti modificare un po ‘la tua strategia di interfaccia utente e invece di colorare la casella in rosso, potresti colorare i bordi in rosso, o mettere un piccolo nastro rosso accanto (come il nastro “Loading” di gmails) che svanisce quando la scatola è in messa a fuoco.

È un pezzo di torta con jQuery:

 if ($.browser.webkit) { $("input").attr('autocomplete','off'); } 

O se vuoi essere un po ‘più selettivo, aggiungi un nome di class per un selettore.

Il modo più semplice a mio parere è:

  1. Ottieni http://www.quirksmode.org/js/detect.html
  2. Usa questo codice:

     if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); }; 

Dopo aver applicato la sua soluzione a Benjamin, ho scoperto che premere il pulsante Indietro mi avrebbe comunque dato l’evidenziazione gialla.

La mia soluzione in qualche modo per impedire che questo highlight giallo venga ripristinato è applicando il seguente jQuery javascript:

  

Spero che aiuti chiunque !!

Questo funziona. Meglio di tutti, è ansible utilizzare i valori di rgba (l’incastro di box-shadow non funziona con rgba). Questa è una leggera modifica della risposta di @ Benjamin. Sto usando $ (document) .ready () invece di $ (window) .load (). Sembra funzionare meglio per me – ora c’è molto meno FOUC. Non credo ci siano e svantaggi nell’usare $ (document) .ready ().

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(document).ready(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); }); }); }; 

per le versioni di oggi, funziona anche se inserito in uno dei due ingressi di accesso. Correggere anche la versione 40+ e il problema di Firefox in ritardo.

  
 input:focus { outline:none; } 

Questo ha funzionato benissimo per me, ma è più che probabile che manterrai le cose uniformi sul tuo sito che vorresti includere anche nel tuo CSS per i textareas:

 textarea:focus { outline:none; } 

Inoltre può sembrare ovvio per la maggior parte, ma per i principianti è anche ansible impostarlo su un colore in quanto tale:

 input:focus { outline:#HEXCOD SOLID 2px ; } 

Se ricordo bene, una regola “importante” nel foglio di stile per il colore di sfondo degli input sovrascriverà il completamento automatico della barra degli strumenti di Google – presumibilmente lo stesso sarebbe vero per Chrome.