: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.
La pseudo-classe CSS :placeholder-shown représente n'importe quel élément <input> ou <textarea> affichant un 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 id="name" name="name" type="text" />
<label for="email">Adresse e-mail :</label>
<input id="email" name="email" type="email" placeholder="name@example.com" />
<label for="age">Votre âge :</label>
<input
id="age"
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 utiliser text-overflow pour gérer cela gracieusement.
HTML
<input
id="input1"
placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !" />
<br /><br />
<input
id="input2"
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 id="test">
<p>
<label for="name">Entrer le nom d'un étudiant :</label>
<input id="name" placeholder="Nom de l'étudiant" />
</p>
<p>
<label for="branch">Entrer la filière de l'étudiant :</label>
<input id="branch" 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"
id="sid"
class="student-id"
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
Chargement…
Voir aussi
- Le pseudo-élément
::placeholderapplique un style au placeholder lui-même. - Les éléments HTML associés :
- Les formulaires HTML