Utilisez la propriété CSS :autofill pour mettre en évidence les champs qui ont été (ou n'ont pas été) remplis automatiquement, afin d'aider l'utilisateur à remplir correctement le formulaire.
Mise en œuvre
Pour mettre en évidence un champ de formulaire qui a été rempli automatiquement par le navigateur (et non modifié par l'utilisateur), ajoutez un sélecteur à votre CSS à l'aide de la classe :autofill. Il peut être utilisé pour un élément <input>, <select> ou <textarea>.
Lorsque vous appliquez un style aux états de saisie automatique, vous devez respecter les bonnes pratiques d'accessibilité :
- Indicateurs d'état multiples : ne vous fiez pas uniquement à la couleur de la bordure pour indiquer l'état de saisie automatique. Utilisez plusieurs indicateurs, tels que l'épaisseur de la bordure et l'ombrage d'arrière-plan personnalisé, pour vous assurer que l'état est perceptible.
- Conservez les indicateurs de sélection : ne supprimez jamais les contours de sélection (
outline: none) sans fournir un remplacement clair et à contraste élevé pour les utilisateurs du clavier.
L'exemple suivant utilise :autofill pour définir une bordure et un arrière-plan personnalisés, ainsi que des styles de sélection explicites :
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;
}
Comme illustré dans cet exemple, la propriété box-shadow permet de personnaliser l'arrière-plan, car background-color ne peut pas être remplacé directement dans les champs de saisie automatique.
Utilisez le nom de pseudo-classe CSS correct.
N'utilisez pas :auto-fill, car cela est incorrect.
OBLIGATOIRE : Utilisez :autofill, car il s'agit du nom de pseudo-classe correct.
Stratégies de remplacement
La pseudo-classe :autofill est une amélioration progressive. Dans les navigateurs qui ne la prennent pas en charge, le formulaire fonctionnera toujours normalement, mais les entrées ne recevront tout simplement pas la mise en surbrillance personnalisée de la saisie automatique. Les utilisateurs pourront toujours remplir le formulaire. Aucune création de remplacement JavaScript supplémentaire ne doit être utilisée.