Pseudo-classe CSS `:placeholder-shown`

Baseline

Large disponibilité

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.

Voir la compatibilité complète
En savoir plus

La pseudo-classe CSS :placeholder-shown représente n'importe quel élément HTML <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;
}

<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 plus de 18 ans" />

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

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

<p>
  <label for="nom">Nom d'un étudiant·e&nbsp;:</label>
  <input id="nom" placeholder="Nom de l'étudiant" />
</p>
<p>
  <label for="filiere">Filière de l'étudiant·e&nbsp;:</label>
  <input id="filiere" placeholder="Filière de l'étudiant" />
</p>
<p>
  <label for="sid">ID à 8 chiffres de l'étudiant·e&nbsp;:</label>
  <input
    type="number"
    pattern="[0-9]{8}"
    title="8 chiffres"
    id="sid"
    class="id-etudiant"
    placeholder="8 chiffres" />
</p>

CSS

css

input {
  background-color: #e8e8e8;
  color: black;
}

input.id-etudiant:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}