The ::placeholderelemen semu (atau kelas semu, dalam beberapa kasus, tergantung pada pelaksanaan browser) memungkinkan Anda untuk gaya teks placeholder dari elemen bentuk. Seperti pada, teks disetel dengan placeholderatribut:
Anda dapat mengatur gaya teks itu di sebagian besar browser dengan beberapa pemilih yang diawali 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; )Peringatan penting: sintaks ini tidak standar, jadi semua penamaan gila. Itu tidak muncul di spesifikasi sama sekali. :placeholder-shownadalah standar, dan bahkan pembuat spesifikasi tampaknya berpikir ::placeholderakan menjadi versi standar.
Seperti psuedo lainnya, Anda dapat mengatur cakupannya ke elemen tertentu sesuai kebutuhan, seperti:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Perbedaan antara :placeholder-showndan::placeholder
:placeholder-shownadalah untuk memilih input itu sendiri ketika teks placeholder itu ditampilkan. Berbeda dengan ::placeholdergaya teks placeholder yang mana.
Berikut diagramnya:
Saya menemukan ini sangat membingungkan karena:
- spesifikasi hanya ada
:placeholder-showndan tidak::placeholder :placeholder-shownmasih dapat mempengaruhi gaya teks placeholder, karena itu adalah elemen induk (misalnya ukuran font).
Perhatikan bahwa itu :placeholder-shownadalah kelas semu (ini adalah elemen dalam keadaan tertentu) dan ::placeholdermerupakan elemen semu (hal yang terlihat yang sebenarnya tidak ada di DOM). Dapat dibedakan dengan titik dua tunggal versus ganda.
Tab Atkins membereskannya untuk saya melalui email:
: placeholder-ditampilkan, sebagai pseudo-class, harus memilih elemen yang ada - ia memilih input setiap kali Anda berada dalam status tampilan placeholder. Pseudo-element :: placeholder membungkus teks placeholder yang sebenarnya.
Elemen atau kelas?
Fungsionalitas ini tidak standar. Artinya, setiap browser memiliki ide berbeda tentang cara kerjanya.
Firefox awalnya menerapkan ini sebagai kelas pseudo, tetapi mengubahnya karena banyak alasan. Singkatnya, Anda tidak bisa berbuat banyak dengan kelas semu.
Misalnya, jika Anda ingin mengubah warna teks saat input difokuskan. Anda akan menggunakan selektor like input:focus::placeholder, yang tidak dapat Anda lakukan dengan kelas semu (mereka tidak menumpuk dengan cara yang sama).
IE10 mendukung ini sebagai kelas pseudo, bukan sebagai elemen. Semua orang telah menerapkan elemen semu.
Warna placeholder Firefox
Anda mungkin memperhatikan bagaimana di Firefox warna placeholder terlihat pudar jika dibandingkan dengan browser lain. Pada gambar di bawah, Firefox 43 ditampilkan di sebelah kiri sementara Chrome 47 ditampilkan di sebelah kanan:
Ini karena, secara default, semua placeholder di Firefox memiliki nilai opasitas yang diterapkan padanya, jadi untuk memperbaikinya kita perlu mengatur ulang nilai itu:
::-moz-placeholder ( opacity: 1; )Anda dapat melihat lebih banyak dengan menguji demo ini di Firefox.
Gaya yang Didukung
Elemen pseudo mendukung gaya properti ini:
fontproperticolorbackgroundpropertiword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Kelas pseudo mendukung sebagian besar (jika tidak semua) properti ini juga, tetapi tidak sefleksibel untuk alasan yang diuraikan di atas.
Dukungan browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 57 | 19 * | Tidak | 79 | 10.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Properti terkait
Almanac pada 22 Mei 2020: placeholder-ditampilkan
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham