::placeholderPseudo prvek (nebo třídy pseudo, v některých případech, v závislosti na implementaci prohlížeče) umožňuje styl zástupný text v elementu formuláře. Stejně jako v, textová sada s placeholderatributem:
Tento text můžete stylovat ve většině prohlížečů pomocí tohoto výběru selektorů s předponou dodavatele:
::-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é varování: tato syntaxe je nestandardní, tedy veškerá šílenost pojmenování. Ve specifikaci se vůbec neobjevuje. :placeholder-shownje standardní a zdá se, že i autoři specifikací ::placeholderbudou standardizovanou verzí.
Jako každý psuedo jej můžete podle potřeby rozšířit na konkrétní prvky, například:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Ukázka
Rozdíl mezi :placeholder-showna::placeholder
:placeholder-shownslouží k výběru samotného vstupu, když se zobrazuje zástupný text. Na rozdíl od ::placeholdertoho, které styly zástupný text.
Tady je diagram:
Považoval jsem to za velmi matoucí jako:
- specifikace pouze mají
:placeholder-showna ne::placeholder :placeholder-shownstále může ovlivnit styl zástupného textu, protože je to nadřazený prvek (např. velikost písma).
Všimněte si, že :placeholder-shownjde o pseudo třídu (je to prvek v určitém stavu) a ::placeholderjedná se o pseudo prvek (viditelná věc, která ve skutečnosti není v DOM). Rozlišitelné dvojtečkami jedno versus dvojité.
Tab Atkins mi to objasnil e-mailem:
: placeholder-shown, being a pseudo-class, has to select an existing element - it selects the input whenever you're in the placeholder-showing state. The :: placeholder pseudo-element wraps the actual placeholder text.
Prvek nebo třída?
Tato funkce není standardizovaná. To znamená, že každý prohlížeč má jinou představu o tom, jak by měl fungovat.
Firefox to původně implementoval jako pseudo třídu, ale změnil to z mnoha důvodů. Aby byl dlouhý příběh krátký, s pseudotřídou toho tolik neuděláte.
Například pokud chcete změnit barvu textu, když je vstup zaostřen. Použili byste selektor jako input:focus::placeholder, který byste nemohli dělat s pseudo třídou (neskládají se stejným způsobem).
IE10 to podporuje spíše jako pseudo třídu než jako prvek. Všichni ostatní implementovali pseudo prvek.
Zástupný symbol Firefoxu
Můžete si všimnout, jak ve Firefoxu vypadá barva zástupného symbolu vybledlá ve srovnání s jinými prohlížeči. Na obrázku níže je Firefox 43 zobrazen vlevo, zatímco Chrome 47 vpravo:
Důvodem je, že ve výchozím nastavení mají všechny zástupné symboly ve Firefoxu použitou hodnotu krytí, takže abychom to napravili, musíme tuto hodnotu resetovat:
::-moz-placeholder ( opacity: 1; )Více si můžete prohlédnout testováním této ukázky ve Firefoxu.
Podporované styly
Pseudo prvek podporuje styl těchto vlastností:
fontvlastnosticolorbackgroundvlastnostiword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Třída pseudo podporuje také většinu (ne-li všechny) těchto vlastností, ale není tak flexibilní z výše uvedených důvodů.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 57 | 19 * | Ne | 79 | 10.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Související vlastnosti
Sborník dne 22. května 2020: zobrazen zástupný symbol
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham