:placeholder-shownPseudo-clasa selectează elementul de intrare în sine , atunci când există text substituent într - o formă de intrare. Gândiți-vă la acesta ca la un mod frumos de a distinge între intrările care arată în prezent textul substituent față de cele care nu sunt.
input:placeholder-shown ( border: 5px solid red; )Ideea din spatele substituenților
Textele bazate pe text și introducerea pot avea text substituent. Este un text care este afișat când intrarea este goală, pentru a sugera o posibilă valoare. De exemplu, un formular care solicită o școală ar putea avea o etichetă pentru ceea ce solicită, dar apoi sugerează „Forest Hills Example High School” în substituent ca exemplu de valoare:
School Name: Diferența dintre :placeholder-shownși::placeholder
:placeholder-showneste pentru selectarea intrării în sine când este afișat textul substituent. Spre deosebire de ::placeholderstilurile textului substituent.
Iată o diagramă:
Am găsit acest lucru foarte confuz ca:
- specificațiile au doar
:placeholder-shownși nu::placeholder :placeholder-shownpoate afecta în continuare stilul textului substituent, deoarece este un element părinte (de exemplu, dimensiunea fontului).
Rețineți că :placeholder-showneste o pseudo- clasă (este un element într-o anumită stare) și ::placeholdereste un pseudo- element (un lucru vizibil care nu este cu adevărat în DOM). Se distinge prin două puncte contra două puncte.
Tab Atkins mi-a clarificat-o prin e-mail:
:placeholder-shown, fiind o pseudo-clasă, trebuie să selecteze un element existent. Selectează intrarea ori de câte ori vă aflați în starea de afișare a substituentului.::placeholder-Elementul pseudo înfășoară textul real înlocuitor.
Dacă trebuie să stilizați textul substituent
Utilizați ::placeholder (de fapt, utilizați toate prefixurile nebune ale furnizorului) pe care le-am detaliat în Almanah aici.
Mai multe informatii
- Selectoare Nivelul 4 Spec
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |