: plassholder-vist - CSS-triks

Anonim

Den :placeholder-shownpseudo-klasse velger inngangselementet selv når eksempelteksten foreligger i en form som inngang. Tenk på det som en fin måte å skille mellom innganger som for øyeblikket viser plassholdertekst versus de som ikke er det.

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

Ideen bak plassholdere

Tekstbaserte s og inngangen kan ha plassholdertekst. Det er tekst som vises når inngangen er tom, for å foreslå en mulig verdi. For eksempel kan et skjema som ber om en skole ha en merkelapp for hva den ber om, men foreslå deretter "Forest Hills Example High School" i plassholderen som en eksempelverdi:

School Name:

Forskjellen mellom :placeholder-shownog::placeholder

:placeholder-showner for å velge selve inngangen når plassholderteksten vises. I motsetning til ::placeholderhvilke stiler plassholderteksten.

Her er et diagram:

Jeg syntes dette var veldig forvirrende som:

  1. spesifikasjonene bare har :placeholder-shownog ikke::placeholder
  2. :placeholder-shown kan fortsatt påvirke utformingen av plassholderteksten, siden det er et overordnet element (f.eks. skriftstørrelse).

Merk at det :placeholder-showner en pseudo- klasse (det er et element i en bestemt tilstand) og ::placeholderer et pseudo- element (en synlig ting som ikke er i DOM). Det skiller seg ut med enkelt-mot-dobbelt kolon.

Tab Atkins ryddet opp for meg via e-post:

:placeholder-shown, som en pseudoklasse, må velge et eksisterende element. Den velger inngangen når du er i tilstanden som viser plassholder. Den ::placeholderpseudo-element brytes selve eksempelteksten.

Hvis du trenger å style plassholderteksten

Bruk ::placeholder (faktisk bruk alle de gale leverandørprefiksene for det) som vi har beskrevet i Almanakken her.

Mer informasjon

  • Velger nivå 4 spes

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
47 51 11 * 79 9

Mobil / nettbrett

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