Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le pseudo-élément ::placeholder représente le texte de substitution pour un élément de formulaire. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.

::placeholder {
  color: blue;
  font-size: 1.5em;
}

Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :

Note : Par défaut, dans Firefox, le texte de substitution est écrit en gris clair.

Syntaxe

::placeholder

Exemples

CSS

input::placeholder {
  color: red;
}

HTML

<input type="email" placeholder="toto@exemple.com">

Résultat

Accessibilité

Contraste

Taux de contraste

Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.

Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

  • Si le texte est en gras : 18.66px ou plus grand
  • Sinon 24px ou plus grand

Autres ressources :

Utilisabilité

Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément <input>. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.

Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut aria-describedby afin de relier l'élément <input> à l'indication associée.

Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront aria-describedby afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.

<label for="user-email">Votre adresse mail</label>
<span id="user-email-hint" class="input-hint">Exemple : johndoe@example.com</span>
<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">

Mode « contraste élevé » de Windows

Lorsque le mode de contraste élevé de Windows est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.

Libellés (<<label>>)

Les textes de substitution ne doivent pas remplacer les éléments <label>. Sans libellé associé grâce à for et à id, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments <input>.

Spécifications

Spécification État Commentaires
CSS Pseudo-Elements Level 4
La définition de '::placeholder' dans cette spécification.
Version de travail Définitions initiales.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 57
Support complet 57
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Edge Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Firefox Support complet 51
Support complet 51
Support complet 19
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Safari Support complet 10.1
Support complet 10.1
Support complet 5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
WebView Android Support complet 57
Support complet 57
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Chrome Android Support complet 57
Support complet 57
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Edge Mobile Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Firefox Android Support complet 51
Support complet 51
Support complet 19
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 37
Préfixée
Support complet 37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Safari iOS Support complet 10.3
Support complet 10.3
Support complet 4.3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-
Samsung Internet Android Support complet 7.0
Support complet 7.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-input-

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,