Pseudo-classe placeholder-shown

La pseudo-classe placeholder-shown applique un style à un input ou textarea lorsque le texte d'indice (placeholder) est affiché, celui-ci disparaissant après le début de la saisie de texte.

Syntaxe

csssélecteur:placeholder-shown {}

Exemple

Définissons une bordure rouge pour l'input dans lequel le texte d'indice est affiché. Après la saisie de texte, la bordure deviendra verte :

html<form>
  <input placeholder="enter the text">
</form>

cssinput {
  border: 1px solid green;
}
input:placeholder-shown {
  border-color: red;
}

Результат:

Voir aussi