::placeholderPseudo prvok (alebo triedy pseudo, v niektorých prípadoch, v závislosti na implementácii prehliadača) umožňuje štýl zástupný text v elemente formulára. Rovnako ako v, textová sada s placeholderatribútom:
Tento text môžete štýlovať vo väčšine prehliadačov pomocou tohto výberu selektorov s predponou dodávateľ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; )Dôležité upozornenie: táto syntax je neštandardná, a teda je všetko pomenovanie bláznivé. V špecifikácii sa vôbec neobjavuje. :placeholder-shownje štandardná a zdá sa, že aj autori špecifikácií ::placeholderbudú štandardizovanou verziou.
Ako každé psuedo, aj podľa potreby ho môžete rozšíriť na konkrétne prvky, napríklad:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Ukážka
Rozdiel medzi :placeholder-showna::placeholder
:placeholder-shownslúži na výber samotného vstupu, keď sa zobrazuje zástupný text. Na rozdiel od toho, ::placeholderktoré štýly má zástupný text.
Tu je diagram:
Považoval som to za veľmi mätúce ako:
- špecifikácie iba majú
:placeholder-showna nie::placeholder :placeholder-shownmôže stále ovplyvniť štýl zástupného textu, pretože je to nadradený prvok (napr. veľkosť písma).
Všimnite si, že :placeholder-shownje pseudo trieda (je to element v určitom stave) a ::placeholderje pseudo prvok (viditeľná vec, ktorá nie je v skutočnosti v DOM). Rozlišiteľné dvojtečkami jednoduché verzus dvojité.
Tab Atkins mi to objasnil prostredníctvom e-mailu:
: placeholder-shown, being a pseudo-class, must to select an existing element - it selects the input whenever you're in the placeholder-showing state. Pseudoelement :: placeholder zalomí skutočný zástupný text.
Element alebo trieda?
Táto funkčnosť nie je štandardizovaná. To znamená, že každý prehľadávač má inú predstavu o tom, ako by mal fungovať.
Firefox to pôvodne implementoval ako pseudotriedu, ale zmenil to z mnohých dôvodov. Aby bol dlhý príbeh krátky, s pseudotriedou toho toľko neurobíte.
Napríklad ak chcete zmeniť farbu textu, keď je vstup zaostrený. Použili by ste selektor typu input:focus::placeholder, ktorý by ste nedokázali robiť s pseudo triedou (neskladajú sa rovnako).
IE10 to podporuje skôr ako pseudo triedu, nie ako prvok. Všetci ostatní implementovali pseudo prvok.
Zástupná farba Firefoxu
Môžete si všimnúť, ako vo Firefoxe vyzerá zástupný symbol vyblednutý v porovnaní s inými prehľadávačmi. Na obrázku nižšie je Firefox 43 zobrazený vľavo, zatiaľ čo Chrome 47 vpravo:
Je to tak preto, lebo predvolene majú všetky zástupné symboly vo Firefoxe nastavenú hodnotu nepriehľadnosti, takže aby sme to napravili, musíme túto hodnotu resetovať:
::-moz-placeholder ( opacity: 1; )Testovaním tejto ukážky v prehliadači Firefox uvidíte viac.
Podporované štýly
Pseudo prvok podporuje štylizáciu týchto vlastností:
fontvlastnosticolorbackgroundvlastnostiword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Trieda pseudo podporuje aj väčšinu (ak nie všetky) týchto vlastností, ale nie je tak flexibilná z vyššie uvedených dôvodov.
Podpora prehliadača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 57 | 19 * | Nie | 79 | 10.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Súvisiace vlastnosti
Almanach 22. mája 2020: zobrazený zástupný symbol
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham