:placeholder-shownPseudo-class vybere sám vstupní prvek , pokud existuje zástupný text ve vstupním formuláři. Představte si to jako pěkný způsob, jak rozlišovat mezi vstupy, které aktuálně zobrazují zástupný text, a těmi, které nejsou.
input:placeholder-shown ( border: 5px solid red; )Myšlenka zástupných symbolů
Textová data a vstup mohou obsahovat zástupný text. Je to text, který se zobrazí, když je vstup prázdný, aby navrhl možnou hodnotu. Například formulář žádající o školu může mít štítek toho, co požaduje, ale jako zástupná hodnota pak navrhne „Forest Hills Example High School“:
School Name: 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-shownjako pseudotřída musí vybrat existující prvek. Vybírá vstup, kdykoli jste ve stavu, kdy se zástupný symbol zobrazuje.::placeholderPseudo-element zábaly skutečný zástupný text.
Pokud potřebujete upravit zástupný text
Použijte ::placeholder (ve skutečnosti pro něj použijte všechny předpony šílených dodavatelů), které jsme zde podrobně popsali v almanachu.
Více informací
- Selektory úrovně 4 Spec
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 |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |