::placeholder

Exemple interactif

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="phone-number">Votre numéro de téléphone&nbsp;:</label><br />

<input
  id="phone-number"
  type="tel"
  name="phone"
  minlength="10"
  maxlength="10"
  placeholder="Il doit comporter 10 chiffres" />

Seul le sous-ensemble des propriétés CSS qui s'appliquent au pseudo-élément ::first-line peut être utilisé dans une règle utilisant ::placeholder dans son sélecteur.

Syntaxe

::placeholder {
  /* ... */
}

Accessibilité

Contraste

Taux de contraste

Le texte de substitution est généralement affiché dans une couleur plus claire afin d'indiquer qu'il s'agit d'une suggestion quant au type de saisie valide, et non d'une saisie réelle.

Il est important de veiller à ce que le rapport de contraste entre la couleur du texte de substitution et l'arrière-plan du champ de saisie soit suffisamment élevé pour que les personnes malvoyantes puissent le lire, tout en s'assurant qu'il y ait une différence suffisante entre la couleur du texte de substitution et celle du texte saisi afin que les utilisateur·ice·s ne confondent pas le texte de substitution avec les données saisies.

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) ^(angl.), 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. Un texte de grande taille est défini comme étant de 18,66 pixels et en gras ou plus grand, ou de 24 pixels ou plus.

• WebAIM : vérificateur de contraste ^(angl.)
• Explications des recommendation WCAG 1.4
• Comprendre le critère de succès 1.4.3 | W3C Comprendre les WCAG 2.0 ^(angl.)

Utilisabilité

Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur·ice. De plus, les textes de substitution 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 de l'indication est disponible même si des informations sont saisies dans le champ, et la saisie apparaît sans aucune entrée préexistante lorsque la page est chargée. La plupart des technologies de lecture d'écran utilisent aria-describedby pour lire l'indication après l'annonce du texte de l'étiquette de la saisie, et la personne qui utilise le lecteur d'écran peut la désactiver si elle juge ces informations supplémentaires inutiles.

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

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group ^(angl.)

Mode « contraste élevé » de Windows

Le texte de substitution apparaîtra avec le même style que le contenu textuel saisi par l'utilisateur·ice lorsqu'il sera affiché en mode de contraste élevé de Windows ^(angl.). Il est alors impossible de distinguer un texte saisi d'un texte de substitution.

Libellés

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

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group ^(angl.)

Exemples

Changer l'apparence du texte de substitution

Cet exemple montre quelques-unes des modifications que vous pouvez apporter aux styles du texte de substitution.

HTML

<input placeholder="Écrire ici" />

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
  opacity: 0.5;
}

Résultat

Texte opaque

Certains navigateurs rendent le texte de substitution moins opaque. Si vous souhaitez un texte entièrement opaque, définissez explicitement la valeur de la propriété color. La valeur currentColor peut être utilisée pour avoir la même couleur que l'élément d'entrée correspondant.

HTML

<input placeholder="Couleur définie par le navigateur" />
<input placeholder="Même couleur que l'entrée" class="explicit-color" />
<input placeholder="Couleur de texte semi-opaque" class="opacity-change" />

CSS

input {
  font-weight: bold;
  color: green;
}

.explicit-color::placeholder {
  /* utiliser la même couleur que l'élément d'entrée pour éviter la couleur par
     défaut définie par le navigateur */
  color: currentColor;
}

.opacity-change::placeholder {
  /* texte moins opaque */
  color: color-mix(in srgb, currentColor 70%, transparent);
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La pseudo-classe :placeholder-shown de mise en forme d'un élément qui a un texte de substitution actif.
• Les éléments HTML associés :
  • <input>
  • <textarea>
• Les formulaires HTML