Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang :placeholder pada pseudo-class.
Pseudo-class :placeholder adalah CSS pseudo-elemen yang mewakili teks placeholder di masukan bidang-teks yang mewakili input dan memberikan petunjuk kepada pengguna tentang cara mengisi formulir.
Misalnya, bidang tanggal-masukan mungkin memiliki placeholder teks “YYYY / MM / DD” untuk menjelaskan bahwa tanggal numerik yang harus dimasukkan agar tahun-bulan-hari. Field input yang mengambil sebuah email sebagai nilai mungkin memiliki “aviorre@gmail.com” sebagai teks placeholder, mengisyaratkan tentang format email. Dalam kebanyakan browser, placeholder teks awalnya berwarna abu-abu terang. Anda dapat mengubah gaya font dan warna, misalnya, menggunakan :: placeholder pseudo-element.
Catatan:
- Semua properti yang berlaku untuk :: lini pertama pseudo-elemen juga berlaku untuk :: placeholder pseudo-elemen.
- Beberapa browser memiliki implementasi sendiri non-standar :: placeholder pseudo-elemen. Semua dari mereka implementasi membutuhkan awalan browser. Contoh implementasi tersebut adalah :: – webkit-input-placeholder,: -MS-input-placeholder (single usus), dan: -moz-placeholder yang telah usang di Firefox 19 mendukung lebih baru :: – moz-placeholder pseudo-elemen.
- Tergantung pada browser, simbol masukan mungkin atau mungkin tidak tetap terlihat ketika field input mengambil fokus. Misalnya, IE10 + akan menyembunyikan placeholder ketika input difokuskan, bahkan jika itu masih kosong.
Contoh:
Script berikut mengubah warna default dan keluarga font teks placeholder pada halaman:
::placeholder {
color: #96eb7f;
font-family: Lato, sans-serif;
}
Semoga bermanfaat.