: tijdelijke aanduiding weergegeven - CSS-trucs

Anonim

De :placeholder-shownpseudo-klasse selecteert het invoerelement zelf als er een tijdelijke aanduiding voor tekst bestaat in een formulierinvoer. Zie het als een leuke manier om onderscheid te maken tussen invoer die momenteel plaatsaanduidingstekst toont en invoer die dat niet is.

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

Het idee achter tijdelijke aanduidingen

Tekstgebaseerde s en de invoer kunnen tijdelijke tekst bevatten. Het is tekst die wordt weergegeven als de invoer leeg is, om een ​​mogelijke waarde te suggereren. Een formulier waarin om een ​​school wordt gevraagd, kan bijvoorbeeld een label hebben voor datgene waar het om vraagt, maar vervolgens 'Forest Hills Example High School' in de tijdelijke aanduiding voorstellen als een voorbeeldwaarde:

School Name:

Het verschil tussen :placeholder-shownen::placeholder

:placeholder-shownis voor het selecteren van de invoer zelf wanneer de tijdelijke aanduiding-tekst wordt weergegeven. In tegenstelling tot ::placeholderwelke stijlen de plaatsaanduidingstekst.

Hier is een diagram:

Ik vond dit hoogst verwarrend omdat:

  1. de specificaties hebben alleen :placeholder-shownen niet::placeholder
  2. :placeholder-shown kan nog steeds de stijl van de tijdelijke aanduiding-tekst beïnvloeden, aangezien het een bovenliggend element is (bijv. font-size).

Merk op dat :placeholder-shownis een pseudo- klasse (het is een element in een bepaalde staat) en ::placeholderis een pseudo- element (een zichtbaar ding dat is niet echt in het DOM). Te onderscheiden door enkele versus dubbele dubbele punten.

Tab Atkins heeft het via e-mail voor mij opgehelderd:

:placeholder-shownomdat het een pseudo-klasse is, moet het een bestaand element selecteren. Het selecteert de invoer wanneer u zich in de status van tijdelijke aanduiding bevindt. Het ::placeholderpseudo-element omhult de daadwerkelijke tijdelijke aanduiding-tekst.

Als u de tekst van de tijdelijke aanduiding moet opmaken

Gebruik ::placeholder (gebruik eigenlijk alle gekke leveranciersvoorvoegsels ervoor) die we hier in de Almanak hebben beschreven.

Meer informatie

  • Keuzeschakelaars Niveau 4 Spec

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
47 51 11 * 79 9

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 9.0-9.2