Den ::placeholderpseudoelement (eller en pseudo klass, i vissa fall, beroende på genomförandet webbläsare) kan du styla platshållartexten ett formulärelement. Som i, textuppsättningen med placeholderattributet:
Du kan utforma den texten i de flesta webbläsare med denna smattering av leverantörsprefixerade väljare:
::-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; )Viktig varning: denna syntax är icke-standard, alltså alla namngalningar. Det visas inte alls i specifikationen. :placeholder-shownär standard, och även speciella författare tycks tro att det ::placeholderkommer att vara den standardiserade versionen.
Som alla psuedo kan du räcka till specifika element efter behov, som:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Skillnaden mellan :placeholder-shownoch::placeholder
:placeholder-shownär för att välja själva ingången när dess platshållartext visas. Till skillnad från ::placeholdervilka stilar platshållartexten.
Här är ett diagram:
Jag tyckte att detta var mycket förvirrande som:
- specifikationerna har bara
:placeholder-shownoch inte::placeholder :placeholder-shownkan fortfarande påverka utformningen av platshållartexten, eftersom det är ett överordnat element (t.ex. teckenstorlek).
Observera att det :placeholder-shownär en pseudo- klass (det är ett element i ett visst tillstånd) och ::placeholderär ett pseudo- element (en synlig sak som inte finns i DOM). Kännetecknas av enkel-kontra-dubbla kolon.
Tab Atkins rensade upp det för mig via e-post:
: platshållare som visas, är en pseudoklass, måste välja ett befintligt element - det väljer ingången när du befinner dig i platshållarens läge. :: Platshållarens pseudo-element slår in den faktiska platshållartexten.
Element eller klass?
Denna funktionalitet är inte standardiserad. Det betyder att varje webbläsare har en annan uppfattning om hur den ska fungera.
Firefox implementerade ursprungligen detta som en pseudoklass, men ändrade det av en massa skäl. För att göra en lång historia kort kan du inte göra så mycket med en pseudoklass.
Till exempel om du vill ändra textens färg när inmatningen är fokuserad. Du skulle använda en väljare som input:focus::placeholderdu inte skulle kunna göra med en pseudoklass (de staplas inte på samma sätt).
IE10 stöder detta som en pseudoklass snarare än som ett element. Alla andra har implementerat ett pseudo-element.
Firefox platshållarfärg
Du kanske märker hur platshållarens färg ser blek ut i Firefox jämfört med andra webbläsare. I bilden nedan visas Firefox 43 till vänster medan Chrome 47 visas till höger:
Detta beror på att alla platshållare i Firefox som standard har ett opacitetsvärde, så för att åtgärda detta måste vi återställa det värdet:
::-moz-placeholder ( opacity: 1; )Du kan se mer genom att testa denna demo i Firefox.
Stilar som stöds
Pseudo-elementet stöder styling av dessa egenskaper:
fontegenskapercolorbackgroundegenskaperword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Pseudoklassen stöder också de flesta (om inte alla) dessa egenskaper, men är inte lika flexibel av de skäl som beskrivs ovan.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 57 | 19 * | Nej | 79 | 10.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Relaterade egenskaper
Almanack den 22 maj 2020: platshållare visas
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham