: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 :

css

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

css

: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().

css

input {
  border-radius: 3px;
}

input:is(:-webkit-autofill, :autofill) {
  border: 3px dotted orange;
}

html

<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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 15 déc. 2025 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content