Den :placeholder-shownpseudo-klasse vælger inputelementet selv når pladsholdertekst eksisterer i en form input. Tænk på det som en god måde at skelne mellem input, der i øjeblikket viser pladsholdertekst versus dem, der ikke er.
input:placeholder-shown ( border: 5px solid red; )Ideen bag pladsholdere
Tekstbaserede s og input kan have pladsholdertekst. Det er tekst, der vises, når input er tom, for at foreslå en mulig værdi. For eksempel kan en formular, der beder om en skole, have en etiket for, hvad den beder om, men foreslå derefter "Forest Hills Eksempel High School" i pladsholderen som en eksempelværdi:
School Name: Forskellen mellem :placeholder-shownog::placeholder
:placeholder-showner til at vælge selve indgangen, når dens pladsholdertekst vises. I modsætning til ::placeholderhvilke stilarter pladsholderteksten.
Her er et diagram:
Jeg fandt dette meget forvirrende som:
- specifikationerne har kun
:placeholder-shownog ikke::placeholder :placeholder-shownkan stadig påvirke stylingen af pladsholderteksten, da det er et overordnet element (f.eks. skriftstørrelse).
Bemærk, at det :placeholder-showner en pseudo- klasse (det er et element i en bestemt tilstand) og ::placeholderer et pseudo- element (en synlig ting, der ikke rigtig er i DOM). Skelnes ved enkelt-mod-dobbelt kolon.
Tab Atkins ryddede det op for mig via e-mail:
:placeholder-shown, der er en pseudoklasse, skal vælge et eksisterende element. Den vælger input, når du er i tilstanden, der viser pladsholder. Den::placeholderpseudo-element ombrydes selve pladsholderteksten.
Hvis du har brug for at style pladsholderteksten
Brug ::placeholder (faktisk brug alle de skøre sælgerpræfikser til det), som vi har beskrevet i Almanac her.
Mere information
- Vælger Niveau 4 Spec
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |