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

Tra gli altri ausili visivi e di testo per l'invio di un modulo, post-convalida, sto colorando le mie caselle di input in rosso per indicare l'area interattiva che necessita di attenzione.

Su Chrome (e per gli utenti di Google Toolbar) la funzione di riempimento automatico ridimensiona i miei moduli di input in giallo. Ecco il problema complesso: desidero consentire il completamento automatico nei miei moduli, in quanto accelera l'accesso degli utenti. Ho intenzione di verificare la possibilità di disattivare l'attributo di completamento automatico se / quando si verifica un errore, ma è un problema complesso un po 'di codifica per disattivare a livello di programmazione il completamento automatico per il singolo input interessato in 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 impedire a Chrome di ricolorare nuovamente le caselle di input?

[modifica] Ho provato il! suggerimento importante di seguito e non ha avuto alcun effetto. Non ho ancora controllato Google Toolbar per vedere se l'attributo! Important funzionerebbe per questo.

Per quanto ne so, non c'è altro mezzo che usare l'attributo di completamento automatico (che sembra funzionare).

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

Questo può essere usato sia per un singolo elemento

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

... oltre che per un intero modulo

<form autocomplete="off" ...>

Impostare la proprietà del contorno CSS su none.

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

Nei casi in cui il browser può aggiungere anche 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;
}

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

Per rimuovere il bordo per tutti i campi è possibile utilizzare quanto segue:

*:focus { outline:none; }

Per rimuovere il bordo per selezionare i campi basta applicare questa classe ai campi di input desiderati:

.nohighlight:focus { outline:none; }

Ovviamente puoi anche cambiare il bordo come desideri:

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

(Da Bill Beckelman: Sostituisci il bordo automatico di Chrome attorno ai campi attivi utilizzando CSS )

Sì, sarebbe un grosso mal di testa, che secondo me non vale il ritorno. Forse potresti modificare un po 'la tua strategia di interfaccia utente e invece di colorare la scatola in rosso, puoi colorare i bordi in rosso o mettere un piccolo nastro rosso accanto ad essa (come il nastro "Caricamento" delle e-mail che svanisce quando la casella è in messa a fuoco.

È un gioco da ragazzi con jQuery:

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

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

Il modo più semplice secondo me è:

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 @Benjamin alla sua soluzione, ho scoperto che premere il pulsante Indietro mi avrebbe comunque dato la luce gialla.

La mia soluzione in qualche modo per impedire il ritorno di questo momento saliente giallo è l'applicazione del seguente jQuery javascript:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

Spero che aiuti chiunque !!

Questo funziona Soprattutto, è possibile utilizzare i valori rgba (l'hack inset box-shadow non funziona con rgba). Questa è una leggera modifica della risposta di @ Benjamin. Sto usando $ (documento) .ready () invece di $ (finestra) .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 odierne, funziona anche se inserito in uno dei due input di accesso. Risolvi anche la versione 40+ e la versione successiva di Firefox.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

Per me ha funzionato benissimo, ma è molto probabile che mantenga le cose uniformi sul tuo sito e che vorrai includerlo anche nel tuo CSS per le textareas:

textarea:focus { outline:none; }

Inoltre può sembrare ovvio per la maggior parte, ma per i principianti puoi anche 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.