:: placeholder - Astuces CSS

Anonim

Le ::placeholderpseudo élément (ou une pseudo classe, dans certains cas, en fonction de l'implémentation du navigateur) vous permet de styliser le texte d'espace réservé d'un élément de formulaire. Comme dans, le texte défini avec l' placeholderattribut:

Vous pouvez styliser ce texte dans la plupart des navigateurs avec cette poignée de sélecteurs préfixés par le fournisseur:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )

Avertissement important: cette syntaxe n'est pas standard, donc toute la folie de nommage. Cela n'apparaît pas du tout dans la spécification. :placeholder-shownest standard, et même les auteurs de spécifications semblent penser que ce ::placeholdersera la version standardisée.

Comme tout psuedo, vous pouvez l'étendre à des éléments spécifiques selon vos besoins, comme:

input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )

Démo

La différence entre :placeholder-shownet::placeholder

:placeholder-shownsert à sélectionner l'entrée elle-même lorsque son texte d'espace réservé est affiché. Par opposition à ::placeholderquels styles le texte de l'espace réservé.

Voici un diagramme:

J'ai trouvé cela très déroutant car:

  1. les spécifications ont seulement :placeholder-shownet non::placeholder
  2. :placeholder-shown peut encore affecter le style du texte de l'espace réservé, car il s'agit d'un élément parent (par exemple, font-size).

Notez que :placeholder-shownc'est une pseudo classe (c'est un élément dans un état particulier) et ::placeholderc'est un pseudo élément (une chose visible qui n'est pas vraiment dans le DOM). Distinguable par deux points simples ou doubles.

Tab Atkins m'a éclairci par e-mail:

: placeholder-shown, étant une pseudo-classe, doit sélectionner un élément existant - il sélectionne l'entrée chaque fois que vous êtes dans l'état d'affichage de placeholder. Le pseudo-élément :: placeholder enveloppe le texte de l'espace réservé réel.

Élément ou classe?

Cette fonctionnalité n'est pas standardisée. Cela signifie que chaque navigateur a une idée différente de son fonctionnement.

Firefox a initialement implémenté cela comme une pseudo classe, mais l'a changé pour un tas de raisons. Pour résumer, vous ne pouvez pas faire autant avec une pseudo classe.

Par exemple, si vous souhaitez modifier la couleur du texte lorsque l'entrée est focalisée. Vous utiliseriez un sélecteur comme input:focus::placeholder, ce que vous ne pourriez pas faire avec une pseudo-classe (ils ne s'empilent pas de la même manière).

IE10 prend en charge cela comme une pseudo-classe, plutôt que comme un élément. Tout le monde a implémenté un pseudo élément.

Couleur de l'espace réservé Firefox

Vous remarquerez peut-être comment dans Firefox la couleur de l'espace réservé semble estompée par rapport à d'autres navigateurs. Dans l'image ci-dessous, Firefox 43 est affiché à gauche tandis que Chrome 47 est affiché à droite:

La version Chrome est idéalement le style que nous aimerions voir partout.

En effet, par défaut, tous les espaces réservés dans Firefox ont une valeur d'opacité qui leur est appliquée, donc pour résoudre ce problème, nous devons réinitialiser cette valeur:

::-moz-placeholder ( opacity: 1; )

Vous pouvez en voir plus en testant cette démo dans Firefox.

Styles pris en charge

Le pseudo élément prend en charge le style de ces propriétés:

  • font Propriétés
  • color
  • background Propriétés
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

La pseudo-classe prend également en charge la plupart (sinon la totalité) de ces propriétés, mais n'est pas aussi flexible pour les raisons exposées ci-dessus.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
57 19 * Non 79 10.1

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 10,3

Propriétés connexes

Almanach le 22 mai 2020

: affichage de l'espace réservé

input:placeholder-shown ( border: 5px solid red; ) Geoff Graham