:autofill
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis février 2023.
La pseudo-classe CSS :autofill correspond à un élément <input> lorsque sa valeur est remplie automatiquement par le navigateur. La classe cesse la correspondance si l'utilisateur·ice modifie le champ.
Exemple interactif
label { display: block; margin-top: 1em; } input:is(:-webkit-autofill, :autofill) { border: 3px solid darkorange; } <form> <p> Cliquez sur la zone de texte et choisissez l'une des options proposées par votre navigateur. </p> <label for="name">Nom</label> <input id="name" name="name" type="text" autocomplete="name" /> <label for="email">Adresse e-mail</label> <input id="email" name="email" type="email" autocomplete="email" /> <label for="country">Pays</label> <input id="country" name="country" type="text" autocomplete="country-name" /> </form> Note : Les feuilles de style des agents utilisateurs de nombreux navigateurs utilisent !important dans leurs déclarations de style :-webkit-autofill, ce qui les rend impossibles à remplacer par des pages web sans recourir à des hacks JavaScript. Par exemple, Chrome a ce qui suit dans sa feuille de style interne :
background-color: rgb(232 240 254) !important; background-image: none !important; color: -internal-light-dark(black, white) !important; Cela signifie que vous ne pouvez pas définir background-color, background-image ou color dans vos propres règles.
Syntaxe
:autofill { /* ... */ } Exemples
L'exemple suivant démontre l'utilisation de la pseudo-classe :autofill pour changer la bordure d'un champ de texte qui a été complété automatiquement par le navigateur. Pour garantir que nous ne créons pas une liste de sélecteurs invalide, à la fois :-webkit-autofill et :autofill sont associés à l'aide d'une liste de sélecteurs tolérante avec :is().
input { border-radius: 3px; } input:is(:-webkit-autofill, :autofill) { border: 3px dotted orange; } <form method="post" action=""> <label for="email">E-mail</label> <input type="email" name="email" id="email" autocomplete="email" /> </form> Spécifications
| Specification |
|---|
| HTML # selector-autofill |
| Selectors Level 4 # selectordef-autofill |
Compatibilité des navigateurs
Voir aussi
- Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé. (angl.)
- Bug WebKit n°66032 : Permettre aux auteur·ice·s de surcharger la couleur des champs remplis automatiquement. (angl.)
- Bug Mozilla n°740979 : Implémentation de la pseudo-classe
:-moz-autofillpour les élémentsinputavec une valeur saisie automatiquement. (angl.) - Module d'interface utilisateur Niveau 4 : plus de sélecteurs (angl.)