::placeholderPseudo-elementti (tai pseudo-luokan, joissain tapauksissa, riippuen selaimen toteutus) voit muotoilla paikanvaraajateksti lomakkeen elementin. Kuten tekstissä, placeholdermääritteen attribuutti:
Voit muotoilla tekstiä useimmissa selaimissa tällä toimittajan etuliitetyillä valitsimilla:
::-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; )Tärkeä varoitus: tämä syntaksi on epätyypillinen, joten kaikki nimien hulluus. Se ei näy lainkaan spesifikaatiossa. :placeholder-shownon vakio, ja jopa spesifikaattorit näyttävät ajattelevan ::placeholderolevan standardoitu versio.
Kuten mikä tahansa psuedo, voit laajentaa sen tiettyihin elementteihin tarpeen mukaan, kuten:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Ero :placeholder-shownja::placeholder
:placeholder-shownon itse syötteen valitseminen, kun sen paikkamerkkiteksti näytetään. Toisin kuin ::placeholdertyylit paikkamerkkiteksti.
Tässä on kaavio:
Minusta tämä oli erittäin hämmentävää:
- vain teknisillä tiedoilla ei
:placeholder-shownole::placeholder :placeholder-shownvoi silti vaikuttaa paikkamerkkitekstin muotoiluun, koska se on pääelementti (esim. fontin koko).
Huomaa, että :placeholder-shownon pseudo -luokan (se elementti tietyssä tilassa) ja ::placeholderon pseudo -elementti (näkyvä asia, joka ei ole oikein DOM). Erottuva kaksoispisteillä kaksoispisteillä.
Tab Atkins selvitti sen minulle sähköpostitse:
: paikkamerkki-esitetyn, pseudoluokan ollessa kyseessä, on valittava olemassa oleva elementti - se valitsee syötteen aina, kun olet paikkamerkkiä osoittavassa tilassa. :: paikkamerkki-pseudoelementti käärii varsinaisen paikkamerkkitekstin.
Elementti tai luokka?
Tätä toimintoa ei ole standardoitu. Tämä tarkoittaa, että jokaisella selaimella on erilainen käsitys siitä, miten sen pitäisi toimia.
Firefox toteutti tämän alun perin pseudoluokana, mutta muutti sitä useista syistä. Pitkän tarinan lyhentämiseksi et voi tehdä niin paljon näennäisluokan kanssa.
Esimerkiksi, jos haluat muuttaa tekstin väriä, kun syöte on kohdennettu. Käytät valitsinta input:focus::placeholder, jota et voi tehdä pseudoluokan kanssa (ne eivät pinota samalla tavalla).
IE10 tukee tätä näennäisluokana pikemminkin kuin elementti. Kaikki muut ovat toteuttaneet näennäiselementin.
Firefox-paikkamerkki
Saatat huomata, kuinka Firefoxissa paikkamerkin väri näyttää haalistuneelta verrattuna muihin selaimiin. Alla olevassa kuvassa Firefox 43 näkyy vasemmalla, kun taas Chrome 47 oikealla:
Tämä johtuu siitä, että oletusarvoisesti kaikilla Firefoxin paikkamerkkeillä on niihin käytetty peittävyysarvoa, joten tämän korjaamiseksi meidän on palautettava tämä arvo:
::-moz-placeholder ( opacity: 1; )Näet lisää testaamalla tämän esittelyn Firefoxissa.
Tuetut tyylit
Pseudo-elementti tukee näiden ominaisuuksien muotoilua:
fontominaisuudetcolorbackgroundominaisuudetword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Pseudoluokka tukee myös suurinta osaa (jos ei kaikkia) näistä ominaisuuksista, mutta ei ole yhtä joustava edellä esitetyistä syistä.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 57 | 19 * | Ei | 79 | 10.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Liittyvät ominaisuudet
Almanakka 22. toukokuuta 2020: paikkamerkki-esitetty
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham