::placeholderPsevdo element (ali razred psevdo, v nekaterih primerih, odvisno od izvedbe brskalnika) vam omogoča stil besedilo ograde o elementa obrazca. Tako kot v besedilu, nastavljenem z placeholderatributom:
To besedilo lahko oblikujete v večini brskalnikov s tem nabiranjem izbirnikov s predpono prodajalca:
::-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; )Pomembno opozorilo: ta sintaksa je nestandardna, torej vsa nora poimenovanja. V specifikaciji sploh ni. :placeholder-shownje standardna in zdi se, da ::placeholderbodo celo avtorji specifikacij standardizirana različica.
Kot vsak psuedo ga lahko po potrebi razširite na določene elemente, na primer:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Razlika med :placeholder-shownin::placeholder
:placeholder-shownje za izbiro samega vnosa, ko je prikazano njegovo nadomestno besedilo. V nasprotju s ::placeholderkaterimi slogi je nadomestno besedilo.
Tu je diagram:
To se mi je zdelo zelo zmedeno kot:
- očala imajo samo
:placeholder-shownin ne::placeholder :placeholder-shownlahko še vedno vpliva na oblikovanje besedila nadomestnega znaka, saj je nadrejeni element (npr. velikost pisave).
Upoštevajte, da :placeholder-shownje psevdo razred (gre za element v določenem stanju) in ::placeholderje psevdo element (vidna stvar, ki v resnici ni v DOM-u). Razlikuje se po enojnih in dvojnih dvopičjih.
Tab Atkins mi je to poravnal po e-pošti:
: placeholder-shown, ki je psevdorazred, mora izbrati obstoječi element - izbere vhod, kadar koli ste v stanju placeholder-display. Psevdo-element :: placeholder zavije dejansko besedilo nadomestnega znaka.
Element ali razred?
Ta funkcionalnost ni standardizirana. To pomeni, da ima vsak brskalnik drugačno predstavo o tem, kako naj deluje.
Firefox je to prvotno uvedel kot psevdo razred, vendar ga je zaradi številnih razlogov spremenil. Če skrajšam zgodbo, s psevdo razredom ne morete storiti toliko.
Na primer, če želite spremeniti barvo besedila, ko je vnos osredotočen. Uporabili bi izbirnik like input:focus::placeholder, česar pa ne bi mogli storiti s psevdo razredom (ne zložijo enako).
IE10 to podpira kot psevdo razred in ne kot element. Vsi ostali so uvedli psevdo element.
Barva ograde Firefox
Morda boste opazili, kako je v Firefoxu barva ograde videti bleda v primerjavi z drugimi brskalniki. Na spodnji sliki je Firefox 43 prikazan na levi, medtem ko je Chrome 47 prikazan na desni:
Razlog za to je, da imajo privzeto vsa ograda v Firefoxu vrednost neprosojnosti, zato moramo to vrednost ponastaviti:
::-moz-placeholder ( opacity: 1; )Več lahko vidite tako, da preizkusite to predstavitev v Firefoxu.
Podprti slogi
Psevdo element podpira oblikovanje teh lastnosti:
fontlastnosticolorbackgroundlastnostiword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Psevdo razred podpira tudi večino (če ne vse) teh lastnosti, vendar iz zgoraj opisanih razlogov ni tako prilagodljiv.
Podpora brskalnika
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 57 | 19 * | Ne | 79 | 10.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Sorodne lastnosti
Almanah 22. maja 2020: prikazan nadomestni znak
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham