Ak existuje zástupný text vo vstupe formulára, :placeholder-shownpseudotrieda vyberie samotný vstupný prvok . Považujte to za pekný spôsob rozlíšenia medzi vstupmi, ktoré v súčasnosti zobrazujú zástupný text, a vstupmi, ktoré nie sú.
input:placeholder-shown ( border: 5px solid red; )Myšlienka zástupných znakov
Na základe textu a vstupu môže byť zástupný text. Je to text, ktorý sa zobrazuje, keď je vstup prázdny, aby naznačil možnú hodnotu. Napríklad formulár s požiadavkou na školu môže mať štítok s požiadavkou, ale ako zástupná hodnota potom navrhnúť „zástupnú strednú školu Forest Hills“ ako zástupnú hodnotu:
School Name: 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, keďže je pseudotriedou, musí vybrať existujúci prvok. Vyberá vstup vždy, keď ste v stave zobrazujúcom zástupné symboly.::placeholderPseudo-element zábaly skutočný zástupný text.
Ak potrebujete upraviť štýl zástupného textu
Použite ::placeholder (v skutočnosti preňho použite všetky predvoľby šialených dodávateľov), ktoré sme tu podrobne opísali v Almanachu.
Viac informácií
- Selektory úrovne 4 Spec
Podpora prehľadávač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 |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |