mozilla

:-moz-placeholder

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.

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

« CSS « Référence CSS « Extensions Mozilla

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

Notes

Note: Ceci a été incorrectement documenté car il avait été créé pour Gecko 1.9  (Firefox 3), à des fins différentes.

Voir aussi

Étiquettes et contributeurs liés au document

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