:placeholder-shownPseudoklasa wybiera element wejściowy sam gdy istnieje tekst zastępczy w postaci wkładu. Potraktuj to jako dobry sposób na rozróżnienie między danymi wejściowymi, które obecnie wyświetlają tekst zastępczy, a tymi, które nie są.
input:placeholder-shown ( border: 5px solid red; )Idea symboli zastępczych
Teksty oparte na tekście i dane wejściowe mogą mieć tekst zastępczy. Jest to tekst wyświetlany, gdy dane wejściowe są puste, aby zasugerować możliwą wartość. Na przykład formularz z pytaniem o szkołę może mieć etykietę określającą, o co prosi, ale jako przykładową wartość w symbolu zastępczym może sugerować „Forest Hills Example High School” w symbolu zastępczym:
School Name: Różnica między :placeholder-showni::placeholder
:placeholder-shownsłuży do wybierania samego wejścia, gdy jest wyświetlany jego tekst zastępczy. W przeciwieństwie do ::placeholderstylów tekstu zastępczego.
Oto diagram:
Uznałem to za bardzo zagmatwane, ponieważ:
- Specyfikacje mają tylko
:placeholder-showni nie::placeholder :placeholder-shownmoże nadal wpływać na stylizację tekstu zastępczego, ponieważ jest to element nadrzędny (np. rozmiar czcionki).
Zauważ, że :placeholder-shownto pseudo- klasa (jest to element w danym stanie) i ::placeholderjest pseudo- elementem (widoczny rzeczą, która tak naprawdę nie jest w DOM). Można je odróżnić pojedynczymi dwukropkami w porównaniu z podwójnymi.
Tab Atkins wyjaśnił mi to przez e-mail:
:placeholder-shownbędąc pseudoklasą, musi wybrać istniejący element. Wybiera dane wejściowe, gdy jesteś w stanie wyświetlania symbolu zastępczego.::placeholderPseudoelement owija samego tekstu zastępczego.
Jeśli potrzebujesz stylizować tekst zastępczy
Użyj ::placeholder (właściwie użyj do tego wszystkich szalonych prefiksów dostawców), które szczegółowo opisaliśmy w Almanachu tutaj.
Więcej informacji
- Selektory Level 4 Spec
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |