:placeholder-shown
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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="[email protected]" />
<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
css
: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
html
<input placeholder="Saisir quelque chose ici" />
CSS
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
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
css
#input2:placeholder-shown {
text-overflow: ellipsis;
}
Résultat
Champ de saisie personnalisé
HTML
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
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
Loading…
Voir aussi
- Le pseudo-élément
::placeholderapplique un style au placeholder lui-même. - Les éléments HTML associés :
- Les formulaires HTML