The ::placeholderelemen pseudo (atau kelas pseudo, dalam beberapa kes, bergantung kepada pelaksanaan pelayar) membolehkan anda untuk gaya teks ruang letak unsur bentuk. Seperti dalam, teks yang ditetapkan dengan placeholderatribut:
Anda boleh menggayakan teks itu di sebilangan besar penyemak imbas dengan sebilangan pemilih awalan vendor ini:
::-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; )Amaran penting: sintaks ini tidak standard, sehingga semua kegilaan penamaan. Itu sama sekali tidak muncul dalam spesifikasi. :placeholder-shownadalah standard, malah penulis spesifikasi nampaknya ::placeholderakan menjadi versi standard.
Seperti psuedo mana pun, anda boleh memasukkannya ke elemen tertentu yang diperlukan, seperti:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Perbezaan antara :placeholder-showndan::placeholder
:placeholder-shownadalah untuk memilih input itu sendiri ketika teks placeholder sedang ditunjukkan. Berbanding dengan ::placeholdergaya mana teks tempat letak.
Berikut adalah rajah:
Saya rasa ini sangat membingungkan kerana:
- spesifikasi hanya ada
:placeholder-showndan tidak::placeholder :placeholder-shownmasih boleh mempengaruhi gaya teks placeholder, kerana ia adalah elemen induk (contohnya, saiz fon).
Perhatikan bahawa itu :placeholder-shownadalah kelas pseudo (ini adalah elemen dalam keadaan tertentu) dan ::placeholdermerupakan elemen pseudo (perkara yang kelihatan yang sebenarnya tidak ada di DOM). Dibezakan dengan kolon satu lawan satu.
Tab Atkins membersihkannya melalui e-mel:
: placeholder-ditampilkan, sebagai kelas pseudo, harus memilih elemen yang ada - ia memilih input setiap kali anda berada dalam keadaan menunjukkan placeholder. :: placeholder pseudo-element membungkus teks placeholder sebenar.
Elemen atau kelas?
Fungsi ini tidak diseragamkan. Ini bermaksud bahawa setiap penyemak imbas mempunyai idea yang berbeza tentang cara ia berfungsi.
Firefox pada mulanya melaksanakannya sebagai kelas semu, tetapi mengubahnya kerana banyak sebab. Untuk membuat cerpen, anda tidak boleh melakukan banyak perkara dengan kelas pseudo.
Contohnya, jika anda ingin menukar warna teks ketika input difokuskan. Anda akan menggunakan pemilih seperti input:focus::placeholder, yang tidak dapat anda lakukan dengan kelas pseudo (mereka tidak menumpuk dengan cara yang sama).
IE10 menyokong ini sebagai kelas semu, bukannya elemen. Semua orang lain telah menerapkan elemen semu.
Warna tempat letak Firefox
Anda mungkin menyedari bagaimana di Firefox warna tempat letak kelihatan pudar jika dibandingkan dengan penyemak imbas lain. Dalam gambar di bawah, Firefox 43 ditunjukkan di sebelah kiri sementara Chrome 47 ditunjukkan di sebelah kanan:
Ini kerana, secara lalai, semua placeholder di Firefox menerapkan nilai opacity pada mereka, jadi untuk memperbaikinya kita perlu menetapkan semula nilai tersebut:
::-moz-placeholder ( opacity: 1; )Anda dapat melihat lebih banyak lagi dengan menguji demo ini di Firefox.
Gaya yang disokong
Elemen semu menyokong gaya sifat ini:
fontharta bendacolorbackgroundharta bendaword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Kelas pseudo menyokong sebahagian besar (jika tidak semua) sifat ini juga, tetapi tidak fleksibel untuk alasan yang dinyatakan di atas.
Sokongan penyemak imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 57 | 19 * | Tidak | 79 | 10.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Harta yang berkaitan
Almanac pada 22 Mei 2020: tempat letak ditunjukkan
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham