: espace réservé affiché - Astuces CSS

Anonim

La :placeholder-shownpseudo-classe sélectionne l'élément d'entrée lui - même lorsqu'un texte d'espace réservé existe dans une entrée de formulaire. Considérez-le comme un bon moyen de faire la distinction entre les entrées qui affichent actuellement du texte d'espace réservé et celles qui ne le sont pas.

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

L'idée derrière les espaces réservés

Les s basés sur du texte et l' entrée peuvent avoir un texte d'espace réservé. C'est du texte qui s'affiche lorsque l'entrée est vide, pour suggérer une valeur possible. Par exemple, un formulaire demandant une école peut avoir une étiquette pour ce qu'il demande, mais suggérer ensuite "Forest Hills Example High School" dans l'espace réservé comme valeur d'exemple:

School Name:

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 d'espace réservé. Le ::placeholderpseudo-élément enveloppe le texte de l'espace réservé réel.

Si vous avez besoin de styliser le texte de l'espace réservé

Utilisez ::placeholder (en fait, utilisez tous les préfixes de fournisseurs fous pour cela) que nous avons détaillés dans l'Almanach ici.

Plus d'information

  • Sélecteurs Niveau 4 Spec

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
47 51 11 * 79 9

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 9,0-9,2