:placeholder-shownPseudo-klassi valib sisendi element ise kui kohatäitetekst olemas vormis sisend. Mõelge sellele kui toredale viisile teha vahet sisenditel, mis praegu kuvavad kohatäiteteksti, ja nendel, mida seda pole.
input:placeholder-shown ( border: 5px solid red; )Kohahoidjate idee
Tekstipõhistel s ja sisendis võib olla kohatäite tekst. Võimaliku väärtuse soovitamiseks kuvatakse tekst, kui sisend on tühi. Näiteks võib kooli küsival vormil olla silt selle kohta, mida ta küsib, kuid soovitab seejärel kohahoidjas näidisväärtusena „Forest Hillsi näidiskeskkool“:
School Name: Erinevus :placeholder-shownja::placeholder
:placeholder-shownon sisendi enda valimiseks, kui selle kohatäite teksti näidatakse. Erinevalt sellest, ::placeholdermillistes stiilides kohatäite tekst.
Siin on diagramm:
Ma leidsin, et see on väga segane, kuna:
- spetsifikatsioonidel on ainult
:placeholder-shownja mitte::placeholder :placeholder-shownvõib ikkagi mõjutada kohatäite teksti stiili, kuna see on vanemelement (nt fondi suurus).
Pange tähele, et :placeholder-shownon pseudo- klassi (see element teatud osariik) ja ::placeholderon pseudo- element (nähtav asi, mis ei ole tegelikult DOM). Eristatav ühe- või kahekordse jämesoolega.
Tab Atkins lahendas selle minu jaoks e-posti teel:
:placeholder-shown, olles pseudoklass, peab valima olemasoleva elemendi. See valib sisendi alati, kui olete kohatäite kuvamise olekus.::placeholderPseudo-element mähib tegelik kohatäitetekst.
Kui peate kujundama kohatäite teksti
Kasutage ::placeholder (tegelikult kasutage selle jaoks kõiki pööraseid müüja eesliiteid), mida oleme siin Almanachis üksikasjalikult kirjeldanud.
Rohkem informatsiooni
- Valijad 4. taseme spetsifikatsioonid
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0–9,2 |