:autofill - Sélecteur CSS

Description de la pseudo-classe :autofill.

HTML permet de proposer une liste de valeurs pour les zones de saisie qui acceptent du texte ou des valeurs numériques. Cette fonctionnalité est assurée par le navigateur qui conserve les saisies précédentes effectuées dans cette zone ou dans une zone du même type.

Cette possibilité est offerte pour les balises input, textarea, select et form. Elle est activée par l'attribut autocomplete="on" ajouté à la balise.
Remarque : autocomplete accepte également un certain nombre de valeurs prédéfinies, telles que name, email, postal-code, etc.

La pseudo-classe :autofill permet de désigner les zones de saisie dont le contenu a été pré-rempli par le navigateur, sans modification de la part de l'utilisateur.

Exemples d'utilisation de :autofill.

Dans l'exemple ci-dessous plusieurs types de pré-remplissage ont été mis en œuvre. En cliquant dans les zones de saisie, vous faites afficher les propositions du navigateur, déterminées d'après les précédentes saisies effectuées dans des zones du même type.
Le pré-remplissage anonyme ne fonctionne que à partir de la deuxième saisie : vous devez saisir une valeur et cliquer sur le bouton "Envoyer" avant de voir le pré-remplissage proposé par le navigateur.

En déplaçant la souris sur les zones de saisie, vous affichez le code HTML correspondant.
Le code CSS est lui aussi affichable avec le bouton ci-dessous.

Voici comment mettre en évidence le fonctionnement de la pseudo-classe :autofill :
⚠ Firefox   suppose que vous ayez activer la préférence pour suggérer des saisies.

1. Renseignez les quatre zones de saisie ci-dessous.
2. Cliquez sur le bouton "Envoyer" : le formulaire et validé et la page est rappelée. Les valeurs saisies dans les zones 2, 3 et 4 sont enregistrées pour être proposées lors des saisies futures. Cliquez ensuite sur le bouton "Effacer".
3. A présent, lorsque vous cliquez dans les zones 2, 3 ou 4, une liste de propositions s'affiche. Sur certains navigateurs, il faut taper une lettre.
4. Si vous choisissez une valeur parmi les propositions sans la modifier, le contour de la zone de saisie doit passer en rouge. Si vous modifiez la valeur, il reprend sa couleur d'origine.

Compatibilité des navigateurs.

Le sélecteur par pseudo-classe :autofill est maintenant bien reconnu par les principaux navigateurs du marché.

1

Pseudo-classe
:autofill

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe :autofill.

• Sélecteurs - Niveau 4

  Première présentation de la pseudo-classe :autofill dans le niveau 4 de la spécification sur les sélecteurs.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Autres pseudo-classes relatives aux zones de saisie.

⚠
:blank
Pseudo classe désignant les zones de saisie vides.
:checked
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
:default
Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe désignant les zones de saisie veerrouillées.
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
:optional
Pseudo élément désignant les zones de saisie non obligatoires.
:out-of-range
Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
:placeholder-shown
Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
:read-only
Pseudo-classe désignant les zones de saisie en lecture seule.
:read-write
Pseudo-classe désignant les zones de saisie en lecture écriture.
:required
Pseudo-classe désignant les zones de saisie obligatoires.
:user-invalid
Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
:user-valid
Pseudo-classe désignant les zones de saisie dont la valeur est valide.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.