Utilizza il :autofill CSS per evidenziare i campi che sono stati (o non sono stati) compilati automaticamente, in modo da aiutare l'utente a completare correttamente il modulo.
Come implementare
Per evidenziare un campo del modulo che è stato compilato automaticamente dal browser (e non modificato dall'utente), aggiungi un selettore al CSS utilizzando la classe :autofill. Può essere utilizzato per un elemento <input>, <select> o <textarea>.
Quando definisci lo stile degli stati di compilazione automatica, devi rispettare le best practice sull'accessibilità:
- Più indicatori di stato: non fare affidamento solo sul colore del bordo per indicare lo stato di compilazione automatica. Utilizza più indicatori, come lo spessore del bordo e l'ombreggiatura dello sfondo personalizzata, per assicurarti che lo stato sia percepibile.
- Mantieni gli indicatori di selezione: non rimuovere mai i contorni di selezione (
outline: none) senza fornire un'alternativa chiara e ad alto contrasto per gli utenti che utilizzano la tastiera.
L'esempio seguente utilizza :autofill per impostare un bordo e uno sfondo personalizzati, oltre a stili di stato attivo espliciti:
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
Come mostrato in questo esempio, la proprietà box-shadow viene utilizzata per personalizzare lo sfondo, poiché background-color non può essere sostituito direttamente nei campi con compilazione automatica.
Utilizza il nome della pseudo-classe CSS corretto
Non utilizzare :auto-fill: non è corretto.
MANDATORY: Use :autofill as this is the correct pseudo-class name.
Strategie di riserva
La pseudoclasse :autofill è un potenziamento progressivo. Nei browser che non lo supportano, il modulo continuerà a funzionare normalmente, ma gli input non riceveranno l'evidenziazione della compilazione automatica personalizzata. Gli utenti potranno comunque completare il modulo. Non deve essere utilizzato alcun fallback JavaScript aggiuntivo.