:placeholder-shown - Sélecteur CSS

Description de la pseudo-classe :placeholder-shown.

La pseudo-classe :placeholder-shown cible les éléments (zones de saisie) comportant un texte d'aide, tant que celui-ci est affiché. :placeholder-shown cible bien l'élément lui-même, et non pas le texte d'aide. Cependant, par le mécanisme d'héritage, certains propriétés peuvent se retrouver appliquée également au texte d'aide lui-même.

Le texte d'aide est défini dans le code HTML par l'attribut placeholder. Les balises input et textarea sont les seules à reconnaître cet attribut.

Reportez-vous au pseudo-élément pour cibler le texte d'aide lui-même.

Exemples d'utilisation de :placeholder-shown.

Les styles associés à :placeholder-shown définissent un texte en italique. Le texte d'aide est en effet en italique, mais dès qu'une saisie commence, le texte d'aide disparaît, et la mise en forme en italique également.

Compatibilité des navigateurs.

La pseudo-classe :placeholder-shown est bien reconnue par les navigateurs actuels. La deuxième colonne du tableau indique la prise en charge sur des zone de saisie d'un type différent de text, comme number, email ou d'autres.

Remarques :

(1) Utilise la propriété non standardisée -ms-input-placeholder.

1

Pseudo-classe
:placeholder-shown

2

Support sur éléments
type ? text

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Opéra

Firefox

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Voir aussi...

D'autres pseudo-classes sont relatives à l'état des zones de saisie à un moment donné (activées, verrouillées, etc.) Reportez-vous à la liste ci-dessous pour en savoir plus.

:autofill
Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
⚠
:blank
Pseudo classe désignant les zones de saisie vides.
:checked
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
:default
Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe désignant les zones de saisie veerrouillées.
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
:optional
Pseudo élément désignant les zones de saisie non obligatoires.
:out-of-range
Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
:read-only
Pseudo-classe désignant les zones de saisie en lecture seule.
:read-write
Pseudo-classe désignant les zones de saisie en lecture écriture.
:required
Pseudo-classe désignant les zones de saisie obligatoires.
:user-invalid
Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
:user-valid
Pseudo-classe désignant les zones de saisie dont la valeur est valide.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.