Kad veidlapas ievadā pastāv viettura teksts, pseidoklase :placeholder-shownizvēlas ievades elementu pats . Padomājiet par to kā par jauku veidu, kā atšķirt ievades, kurās pašlaik tiek parādīts viettura teksts, no tām, kuras nav.
input:placeholder-shown ( border: 5px solid red; )Ideja aiz vietturiem
Teksta bāzēs un ievadē var būt viettura teksts. Tas ir teksts, kas tiek parādīts, kad ievade ir tukša, lai ieteiktu iespējamo vērtību. Piemēram, veidlapā, kurā tiek prasīta skola, var būt etiķete tam, ko tā lūdz, bet pēc tam vietturī kā piemēru vērtību iesakiet “Forest Hills piemēru vidusskola”:
School Name: Atšķirība starp :placeholder-shownun::placeholder
:placeholder-shownir paredzēts pašas ievades atlasei, kad tiek parādīts tās viettura teksts. Atšķirībā no tā, ::placeholderkādos stilos viettura teksts.
Lūk, diagramma:
Es to uzskatīju par ļoti mulsinošu kā:
- speci ir tikai
:placeholder-shownun nav::placeholder :placeholder-shownjoprojām var ietekmēt viettura teksta stilu, jo tas ir pamatelements (piemēram, fonta lielums).
Ņemiet vērā, ka :placeholder-shownir pseidonotikums klase (tas ir elements, konkrētā valstī), un ::placeholderir pseidonotikums elements (redzama lieta, ka nav īsti DOM). Atšķiras ar resnās vai divkāršās resnās zarnas.
Tab Atkins man to noskaidroja pa e-pastu:
:placeholder-shown, būdams pseidoklase, ir jāizvēlas esošs elements. Tas atlasa ievadi ikreiz, kad atrodaties viettura parādīšanas stāvoklī.::placeholderPseido-elements wraps faktisko viettura tekstu.
Ja jums jāveido viettura teksts
Izmantojiet ::placeholder (faktiski izmantojiet tam visus trakos pārdevēja prefiksus), kurus mēs šeit detalizēti aprakstījām Almanahā.
Vairāk informācijas
- Selektori 4. līmeņa spec
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 9.0-9.2 |