::placeholder - Sélecteur CSS

::placeholder

Résumé des caractéristiques du sélecteur ::placeholder

Description rapide
Pseudo-élément désignant le texte de substitution dans une zone de saisie (attribut placeholder).
Statut
Standard
Module W3C
Module CSS - Pseudo-éléments
Références (W3C)
Statut du document: WD (document de travail)

Description du pseudo-élément ::placeholder.

Le pseudo-élément ::placeholder est un sélecteur qui cible les textes de substitution affichés dans les zones de saisie.

Ce texte de substitution est précisé par l'attribut placeholder des balises input et textarea. Dans le cas des balise input l'attribut placeholder n'est pris en compte que pour les types comportant une zone en saisie libre : text, number, date, etc. Le texte de substitution peut servir à indiquer à l'utilisateur quelle information doit être saisie ici ou dans quel format elle doit être saisie.

Si le texte de substitution est vide ou s'il n'y a pas d'attribut placeholder dans la balise input, les propriétés de ::placeholder ne sont pas appliquées.

Le texte de substitution disparaît dès que l'opérateur saisi un premier caractère. Il en est de même pour l'effet des propriétés appliquées à ::placeholder.

input type="text" placeholder="Ville" input type="text" placeholder="jj/mm/aaaa" input type="text" placeholder="Age (18 à 70)"


::placeholder ciblant le texte de substitution, peu de propriétés sont applicables : les propriétés relatives aux polices de caractères, color, les propriétés liées aux arrière-plans, et quelques autres.

Il existe aussi une pseudo-classe nommée :placeholder-shown qui cible les zones de saisie comportant un texte de substitution.

Exemples d'utilisation de ::placeholder.

Le texte qui s'affiche actuellement dans les quatre zones de saisie ci-dessous est le texte de substitution. Il disparaît si vous commencez une saisie, ainsi que la mise en forme qui lui est associée.

 

Compatibilité des navigateurs.

Le pseudo élément ::placeholder est correctement traité par les navigateurs actuels. Reportez vous au tableau de compatibilité ci-dessous.

Colonne 1
Support du pseudo-élément ::placeholder ciblant le texte d'information d'une zone de saisie.
1
Pseudo-élément
::placeholder
Estimation de la prise en charge globale.
96%

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

Chrome

Edge

Safari

Firefox

Opéra

Safari sur IOS

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Historique du pseudo-élément ::placeholder.

Autres pseudo-éléments.

Le pseudo-élément ::placeholder est présenté dans le module CSS Pseudo-Elements Module , ainsi que les suivants :

Sélecteurs :

::after
Pseudo-élément désignant l'emplacement situé juste après un élément.
::before
Pseudo-élément désignant l'emplacement situé juste avant un élément.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::file-selector-button
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
::first-letter
Pseudo-élément désignant la première lettre du paragraphe.
::first-line
Pseudo-élément désignant la première ligne du paragraphe.
⚠
::grammar-error
Des pseudo-élément ciblant les textes comportant des fautes d'orthographe (::spelling-error) ou des fautes de grammaire (::grammar-error).
::highlight()
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
✗
::inactive-selection
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
::marker
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
⚠
::prefix
Cible les caractères de ponctuation qui peuvent précéder la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères qui la précède.
⚠
::search-text
Cible le texte recherché par l'internaute (zone de recherche CTRL+F du navigateur).
::selection
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
::spelling-error
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
⚠
::suffix
Cible les caractères de ponctuation qui peuvent suivre la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères de ponctuation qui la suivent.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.