:-moz-placeholder

Note : La pseudo-classe :-moz-placeholder est dépréciée à partir de Firefox 19. Le pseudo-élément ::-moz-placeholder doit être utilisé à la place. Depuis Firefox 51, cette fonctionnalité est implémentée en utilisant la pseudo-classe standard :placeholder-shown.

Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La pseudo-classe :-moz-placeholder représente n'importe quel élément de formulaire qui affiche un texte de substitution (placeholder). Cela permet aux développeurs web et aux concepteurs de thèmes d'adapter la mise en forme de ces textes de substitution (généralement affichés en gris clair). La mise en forme par défaut pourra ainsi être modifiée pour gérer le contraste avec un arrière-plan différent.

Exemples

CSS

input::-moz-placeholder {
  color: green;
  opacity: 1;
}

input:-moz-placeholder {
  color: green;
  opacity: 1;
}

HTML

 <input id="test" placeholder="Texte de substitution">

Résultat

Gestion du dépassement

On a souvent des champs de formulaire largement réduits sur les appareils mobiles. Cela peut masquer une partie du texte de substitution qui n'a alors pas la place de s'afficher. Pour éviter une coupure abrupte, on peut utiliser text-overflow avec la valeur ellipsis pour adoucir la fin du texte.

input[placeholder] {
  text-overflow: ellipsis;
}

::-moz-placeholder {
  text-overflow: ellipsis;
} /* Firefox 19+ */

input:-moz-placeholder {
  text-overflow: ellipsis;
}

Spécifications

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support 4.0 (2.0)[1] Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support ? Pas de support Pas de support Pas de support

[1] Implémenté avec bug 457801.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, FredB, Titouan
 Dernière mise à jour par : SphinxKnight,