::placeholderPseudo element (ili pseudo klasa, u nekim slučajevima, ovisno o primjeni preglednika) omogućuje vam da stil tekst rezerviranog mjesta za element obrasca. Kao i u, tekst postavljen s placeholderatributom:
Možete stilizirati taj tekst u većini preglednika pomoću ovog nabora selektora s prefiksom dobavljača:
::-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; )Važno upozorenje: ova sintaksa je nestandardna, dakle sva ludost kod imenovanja. Uopće se ne pojavljuje u specifikaciji. :placeholder-shownje standardni, a čini se da čak i autori specifikacija misle da ::placeholderće to biti standardizirana verzija.
Kao i svaki psuedo, po potrebi ga možete prilagoditi određenim elementima, poput:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
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 ::placeholderpseudo 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:
: rezervirano mjesto, kao pseudo-klasa, mora odabrati postojeći element - odabire ulaz kad god ste u stanju prikazivanja rezerviranog mjesta. Pseudo-element :: placeholder obavija stvarni tekst rezerviranog mjesta.
Element ili klasa?
Ova funkcionalnost nije standardizirana. To znači da svaki preglednik ima drugačiju ideju o tome kako bi trebao raditi.
Firefox je ovo izvorno implementirao kao pseudo klasu, ali ga je iz više razloga promijenio. Da skratim priču, ne možete toliko puno raditi s pseudo klasom.
Na primjer, ako želite promijeniti boju teksta kad je unos fokusiran. Koristili biste selektor like input:focus::placeholder, što ne biste mogli učiniti sa pseudo klasom (oni se ne slažu na isti način).
IE10 to podržava kao pseudo klasu, a ne kao element. Svi ostali implementirali su pseudo element.
Firefox boja rezerviranog mjesta
Možda ćete primijetiti kako u Firefoxu boja rezerviranog mjesta izgleda blijedo u usporedbi s drugim preglednicima. Na donjoj slici Firefox 43 prikazan je slijeva, dok je Chrome 47 prikazan zdesna:
To je zato što se prema zadanim postavkama sva rezervirana mjesta u Firefoxu na njih primjenjuju vrijednost neprozirnosti, pa da bismo to popravili, moramo resetirati tu vrijednost:
::-moz-placeholder ( opacity: 1; )Možete vidjeti više testiranjem ove demonstracije u Firefoxu.
Podržani stilovi
Pseudo element podržava oblikovanje ovih svojstava:
fontSvojstvacolorbackgroundSvojstvaword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Pseudo klasa podržava i većinu (ako ne i sva) ovih svojstava, ali nije toliko fleksibilna iz gore navedenih razloga.
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 |
|---|---|---|---|---|
| 57 | 19 * | Ne | 79 | 10.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Povezana svojstva
Almanah 22. svibnja 2020: rezervirano mjesto-prikazano
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham