: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-shown
text
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
![Androïd Brower Logo Androïd Brower](/v2-img/logo-android-browser.png)
Androïd Brower
![Baidu Browser Logo Baidu Browser](/v2-img/logo-baidu-browser.png)
Baidu Browser
![Chrome Logo Chrome](/v2-img/logo-chrome.png)
Chrome
![Chrome pour Androïd Logo Chrome pour Androïd](/v2-img/logo-chrome-for-android.png)
Chrome pour Androïd
![Edge Logo Edge](/v2-img/logo-edge.png)
Edge
![Firefox Logo Firefox](/v2-img/logo-firefox.png)
Firefox
![Firefox pour Androïd Logo Firefox pour Androïd](/v2-img/logo-firefox-for-android.png)
Firefox pour Androïd
![Internet Explorer Logo Internet Explorer](/v2-img/logo-ie.png)
Internet Explorer
![KaiOS Browser Logo KaiOS Browser](/v2-img/logo-kaios-browser.png)
KaiOS Browser
![Opéra Logo Opéra](/v2-img/logo-opera.png)
Opéra
![Opéra Mobile Logo Opéra Mobile](/v2-img/logo-opera-mobile.png)
Opéra Mobile
![QQ Browser Logo QQ Browser](/v2-img/logo-qq-browser.png)
QQ Browser
![Safari Logo Safari](/v2-img/logo-safari.png)
Safari
![Safari sur IOS Logo Safari sur IOS](/v2-img/logo-safari-on-ios.png)
Safari sur IOS
![Samsung Internet Logo Samsung Internet](/v2-img/logo-samsung-internet.png)
Samsung Internet
![UC Browser pour Androïd Logo UC Browser pour Androïd](/v2-img/logo-uc-browser-for-android.png)
UC Browser pour Androïd
![Oméra mini Logo Oméra mini](/v2-img/logo-opera-mini.png)
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.