Den ::placeholderpseudo element (eller en pseudo-klasse, i nogle tilfælde, afhængigt af browseren implementering) giver dig mulighed for at style pladsholderteksten af en form element. Som i, sætte teksten med placeholderattributten:
Du kan style denne tekst på tværs af de fleste browsere med denne smattering af leverandørpræfikserede vælgere:
::-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; )Vigtig advarsel: denne syntaks er ikke-standard, altså al navngivning. Det vises slet ikke i spec. :placeholder-showner standard, og selv specielle forfattere synes at ::placeholdervære den standardiserede version.
Som enhver psuedo kan du bruge den til specifikke elementer efter behov, som:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
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:
: pladsholder vist, er en pseudoklasse, skal vælge et eksisterende element - det vælger input, når du er i tilstanden, der viser pladsholderen. :: pseudo-element for pladsholder indpakker den faktiske pladsholdertekst.
Element eller klasse?
Denne funktionalitet er ikke standardiseret. Det betyder, at hver browser har en anden ide om, hvordan den skal fungere.
Firefox implementerede oprindeligt dette som en pseudoklasse, men ændrede det af en række årsager. For at gøre en lang historie kort kan du ikke gøre så meget med en pseudoklasse.
For eksempel, hvis du vil ændre farven på teksten, når input er fokuseret. Du bruger en vælger som input:focus::placeholder, som du ikke ville være i stand til at gøre med en pseudoklasse (de stabler ikke på samme måde).
IE10 understøtter dette som en pseudoklasse snarere end et element. Alle andre har implementeret et pseudo-element.
Firefox pladsholderfarve
Du bemærker muligvis, hvordan pladsholderens farve ser falmet ud i Firefox sammenlignet med andre browsere. På billedet nedenfor vises Firefox 43 til venstre, mens Chrome 47 vises til højre:
Dette skyldes, at alle pladsholdere i Firefox som standard har en uigennemsigtighedsværdi, så for at løse dette er vi nødt til at nulstille denne værdi:
::-moz-placeholder ( opacity: 1; )Du kan se mere ved at teste denne demo ud i Firefox.
Understøttede stilarter
Pseudo-elementet understøtter styling af disse egenskaber:
fontejendommecolorbackgroundejendommeword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Pseudoklassen understøtter også de fleste (hvis ikke alle) disse egenskaber, men er ikke så fleksibel af de ovenfor beskrevne grunde.
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 |
|---|---|---|---|---|
| 57 | 19 * | Ingen | 79 | 10.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Relaterede egenskaber
Almanak den 22. maj 2020: pladsholder vist
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham