Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:placeholder-shown
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
Lapseudo-classeCSS:placeholder-shown représente n'importe quel élément<input> ou<textarea> affichantun texte de substitution.
Exemple interactif
label { display: block; margin-top: 1em;}input:placeholder-shown { background-color: ivory; border: 2px solid darkorange; border-radius: 5px;}<form> <label for="name">Nom complet :</label> <input name="name" type="text" /> <label for="email">Adresse e-mail :</label> <input name="email" type="email" placeholder="name@example.com" /> <label for="age">Votre âge :</label> <input name="age" type="number" value="18" placeholder="Vous devez avoir ples de 18 ans" /></form>Syntaxe
:placeholder-shown { /* ... */}Exemples
Exemple simple
Cet exemple applique des styles de police et de bordure spéciaux lorsque le texte de substitution est affiché.
HTML
<input placeholder="Saisir quelque chose ici" />CSS
input { border: 1px solid black; padding: 3px;}input:placeholder-shown { border-color: teal; color: purple; font-style: italic;}Résultat
Dépassement du texte
Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utilisertext-overflow pour gérer cela gracieusement.
HTML
<input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !" /><br /><br /><input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !" />CSS
#input2:placeholder-shown { text-overflow: ellipsis;}Résultat
Champ de saisie personnalisé
HTML
<form> <p> <label for="name">Entrer le nom d'un étudiant :</label> <input placeholder="Nom de l'étudiant" /> </p> <p> <label for="branch">Entrer la filière de l'étudiant :</label> <input placeholder="Filière de l'étudiant" /> </p> <p> <label for="sid">Entrer l'ID de l'étudiant :</label> <input type="number" pattern="[0-9]{8}" title="8 chiffres" placeholder="8 chiffres" /> </p> <input type="submit" /></form>CSS
input { background-color: #e8e8e8; color: black;}input.student-id:placeholder-shown { background-color: yellow; color: red; font-style: italic;}Résultat
Spécifications
| Specification |
|---|
| HTML # selector-placeholder-shown |
| Selectors Level 4 # placeholder-shown-pseudo |
Compatibilité des navigateurs
Voir aussi
- Le pseudo-élément
::placeholderapplique un style au placeholderlui-même. - Les éléments HTML associés :
- Les formulaires HTML