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:

Semoga bermanfaat.