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

Question

Tra gli altri ausili visivi e di testo per l'invio di un modulo, dopo la 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, poiché accelera l'accesso degli utenti. Vado a controllare 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).

Answer 1

So che in Firefox è possibile utilizzare l'attributo completamento automatico = " off " per disabilitare la funzionalità di completamento automatico. Se funziona in Chrome (non è stato 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">

... nonché per un intero modulo

<form autocomplete="off" ...>

Answer 2

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 anche un colore di sfondo, questo può essere risolto da qualcosa come

:focus { background-color: #fff; }

Answer 3

questo è esattamente quello che stai cercando!

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

Answer 4

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 / fissaggio-google-chromes-giallo-autocomplete-styles-con-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);
    });
});}

Answer 5

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

Naturalmente 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 )

Answer 6

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 (come le gmail "Caricamento" e nastro) che svanisce quando la casella è a fuoco.

Answer 7

È 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.

Answer 8

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

Answer 9

Dopo aver applicato la soluzione di @Benjamin, ho scoperto che premere il pulsante Indietro mi avrebbe comunque permesso di evidenziare in giallo.

La mia soluzione in qualche modo per evitare che questa evidenziazione gialla ritorni è 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 !!

Answer 10

Funziona. Soprattutto, puoi usare i valori di 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);
        });
    });
};

Answer 11

per le versioni odierne, funziona anche se inserito in uno dei due ingressi di accesso. Risolvi anche la versione 40+ e la versione successiva di Firefox.

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

Answer 12

input:focus { outline:none; }

Per me ha funzionato benissimo ma è più che probabile che mantieni le cose uniformi sul tuo sito che vorrai includere 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 come tale:

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

Answer 13

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.