:autofill

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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

This page was last modified on ⁨13 sept. 2025⁩ by MDN contributors.

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