:placeholder-shown - Sélecteur CSS
Résumé des caractéristiques du sélecteur :placeholder-shown
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 ::placeholder 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.
:placeholder-showntextNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Oméra mini
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.: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.:indeterminate: Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.:in-range: Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.:invalid: Pseudo classe désignant les zones de saisie contenant une information invalide.: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.::placeholder: Pseudo-élément désignant le texte d'information dans une zone de saisie.:placeholder-shown: Pseudo-classe désignant les zones de saisie comportant un texte d'aide.: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.