::placeholderElementul pseudo (sau o clasă de pseudo, în unele cazuri, în funcție de implementarea browser - ul) vă permite să stilizați textul înlocuitor al unui element de formular. Ca și în, textul setat cu placeholderatributul:
Puteți stiliza textul respectiv în majoritatea browserelor cu ajutorul acestor selectoare prefixate de furnizor:
::-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; )Avertisment important: această sintaxă este non-standard, deci toată nebunia de numire. Nu apare deloc în specificații. :placeholder-showneste standard și chiar autorii specificațiilor par să creadă că ::placeholdervor fi versiunea standardizată.
Ca orice psuedo, îl puteți extinde la elemente specifice, după cum este necesar, cum ar fi:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
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:
: substituent-arătat, 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. Pseudo-elementul :: substituent înfășoară textul substituent real.
Element sau clasă?
Această funcționalitate nu este standardizată. Asta înseamnă că fiecare browser are o idee diferită despre cum ar trebui să funcționeze.
Firefox a implementat inițial acest lucru ca o pseudo-clasă, dar a schimbat-o din mai multe motive. Pentru a face scurtă povestea lungă, nu poți face la fel de mult cu o pseudo-clasă.
De exemplu, dacă doriți să schimbați culoarea textului când intrarea este focalizată. Ați folosi un selector ca input:focus::placeholder, pe care nu l-ați putea face cu o pseudo clasă (nu se stivuiesc în același mod).
IE10 acceptă acest lucru ca o pseudo-clasă, mai degrabă decât ca un element. Toți ceilalți au implementat un pseudoelement.
Culoarea substituentului Firefox
S-ar putea să observați cum în Firefox culoarea substituentului pare estompată în comparație cu alte browsere. În imaginea de mai jos, Firefox 43 este afișat în stânga, în timp ce Chrome 47 este afișat în dreapta:
Acest lucru se datorează faptului că, în mod implicit, toți substituiții din Firefox au o valoare de opacitate aplicată, așa că, pentru a remedia acest lucru, trebuie să resetați acea valoare:
::-moz-placeholder ( opacity: 1; )Puteți vedea mai multe testând această demonstrație în Firefox.
Stiluri acceptate
Pseudoelementul acceptă stilizarea acestor proprietăți:
fontproprietățicolorbackgroundproprietățiword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Clasa pseudo acceptă majoritatea (dacă nu chiar toate) dintre aceste proprietăți, dar nu este la fel de flexibilă din motivele prezentate mai sus.
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 |
|---|---|---|---|---|
| 57 | 19 * | Nu | 79 | 10.1 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Proprietăți conexe
Almanah pe 22 mai 2020: substituent-arătat
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham