:placeholder-shownPseudo-klase odabire sama ulaznog elementa kada zamjenski tekst postoji u ulaz obliku. Shvatite to kao lijep način za razlikovanje ulaza koji trenutno prikazuju tekst rezerviranog mjesta od onih koji to nisu.
input:placeholder-shown ( border: 5px solid red; )Ideja iza rezerviranih mjesta
Tekstualni s i ulaz mogu imati tekst rezerviranog mjesta. Tekst se prikazuje kada je ulaz prazan, kako bi se sugerirala moguća vrijednost. Na primjer, obrazac u kojem se traži škola može imati oznaku za ono što traži, ali zatim kao rezerviranu vrijednost predložite "Primjer srednje škole u šumi Hills" kao primjer vrijednosti:
School Name: Razlika između :placeholder-showni::placeholder
:placeholder-shownje za odabir samog unosa kada se prikazuje tekst rezerviranog mjesta. Za razliku od ::placeholderkojih stilova tekst rezerviranog mjesta.
Evo dijagrama:
Smatrao sam ovo vrlo zbunjujućim kao:
- naočale imaju samo,
:placeholder-showna ne::placeholder :placeholder-shownjoš uvijek može utjecati na stil teksta rezerviranog mjesta jer je to nadređeni element (npr. veličina fonta).
Imajte na umu da :placeholder-shownje pseudo- klasa (to je element u određenom stanju) i da ::placeholderje pseudo- element (vidljiva stvar koja zapravo nije u DOM-u). Prepoznatljiv po dvostrukim i dvostrukim dvotačkama.
Tab Atkins to mi je razjasnio putem e-pošte:
:placeholder-shown, kao pseudo-klasa, mora odabrati postojeći element. Odabire ulaz kad god ste u stanju prikazivanja rezerviranog mjesta.::placeholderPseudo-element koji obavija stvarni tekst rezerviranog mjesta.
Ako trebate oblikovati tekst rezerviranog mjesta
Koristite ::placeholder (zapravo, za to upotrijebite sve lude prefikse dobavljača) koje smo detaljno opisali u Almanahu ovdje.
Više informacija
- Selektori Razina 4 Spec
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |