:placeholder-shownNäennäisluokka valitsee tulon elementti itse , kun paikanvaraajatekstiä muodossa, jota syöttää. Ajattele sitä mukavana tapana erottaa syötteet, jotka näyttävät tällä hetkellä paikkamerkkiteksti, ja ne, jotka eivät.
input:placeholder-shown ( border: 5px solid red; )Paikkamerkkien taustalla oleva idea
Tekstipohjaisissa s ja syötteessä voi olla paikkamerkkiteksti. Se on teksti, joka näytetään, kun syöte on tyhjä, mahdollisen arvon ehdottamiseksi. Esimerkiksi koulua pyytävällä lomakkeella voi olla etiketti, mitä se pyytää, mutta ehdottaa sitten paikkamerkissä ”Forest Hills Example High School” esimerkkiarvona:
School Name: 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:
:placeholder-shown, koska se on pseudoluokka, on valittava olemassa oleva elementti. Se valitsee syötteen aina, kun olet paikkamerkkien näyttötilassa.::placeholderNäennäiselementille paketoi paikanvaraajatekstiä.
Jos haluat muotoilla paikkamerkkitekstiä
Käytä ::placeholder (itse asiassa käytä sille kaikkia hulluja myyjien etuliitteitä), jotka olemme tarkentaneet tässä Almanacissa.
Lisää tietoa
- Valitsimet Taso 4 Spec
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 |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |