:-moz-placeholder

Note: la pseudo classe :-moz-placeholder est obsolète dans Firefox 19, et remplacée par le pseudo-élément ::-moz-placeholder.

Note: le CSSWG a décidé d'introduire :placeholder-shown. Cette fonctionnalité sera réintroduite dans Gecko dans le futur, sans préfixe et sous un nouveau nom. bug 1069012

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.

Sommaire

La pseudo-classe :-moz-placeholder représente tous les éléments de formulaires possédant un attribut placeholder. Cela permet au développeur web de personnaliser l'apparence du placeholder qui est gris clair par défaut. Cela peut ne pas fonctionner correctement si la couleur de fond de l'élément de formulaire a été modifiée pour une couleur similaire. Par exemple vous pouvez utiliser cette pseudo-classe pour changer la couleur de la police du placeholder.

Exemple

Cet exemple modifie la couleur du placeholder pour qu'il devienne vert.

<!doctype html>
<html>
<head>
  <title>Placeholder Demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Ce texte s'affiche en vert !">
</body>
</html>

Voir cet exemple en action.

Overflow

Souvent, les éléments de saisie sont très réduits sur les périphériques mobiles. Malheureusement, dans certains cas les placeholder des éléments de saisie ne rentrent pas dans la largeur de l'élément de saisie, cela donne lieu à une coupure forcée. Pour parer à cette éventualité, vous pouvez utiliser text-overflow: ellipsis .

input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }

David Walsh a présenté ceci a beaucoup de concepteurs. Placeholders et Overflow.

Bugzilla

bug 457801

Voir aussi

Étiquettes et contributeurs liés au document

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