::placeholder

Hampir setiap kolom pencarian dan form menampilkan teks petunjuk samar di dalamnya — Cari kopi... atau [email protected]. Teks itu adalah placeholder: milik browser, bukan bagian dari nilai input, dan punya pseudo-element sendiri untuk ditata. Karena tampil samar secara bawaan, banyak styling-nya berakhir pucat sulit dibaca atau, lebih berbahaya lagi, dijadikan pengganti label. Pada chapter ini kita menata ::placeholder dengan benar, lalu mengenal pseudo-class :placeholder-shown yang mendeteksi input yang masih kosong.

Menata ::placeholder #

Pseudo-element ::placeholder menyasar teks petunjuk di dalam input dan textarea:

.kolom-pesan::placeholder {
  color: #8a948f;
  font-style: italic;
}

Property yang paling aman untuk placeholder adalah color dan font-style; property lain seperti font-size juga sah, asalkan perbedaannya tidak membuat petunjuk tampak seperti isi sungguhan.

Satu jebakan yang perlu diketahui sejak awal: browser merender placeholder dengan opacity yang direndahkan. Akibatnya warna yang kita tulis tampak lebih pucat dari yang diharapkan. Bila ingin warna tampil apa adanya, set opacity secara eksplisit:

.kolom-pesan::placeholder {
  color: #6b7280;
  opacity: 1;
}

Jangan tergesa memutihkan warnanya terlalu jauh — placeholder memang seharusnya tampak lebih redup daripada isi, hanya tidak sampai sulit dibaca. Ambang kontras teks normal yang lazim dijadikan patokan adalah 4.5:1 sebagaimana dibahas pada chapter kontras warna.

Catatan kompatibilitas singkat: sebagian browser lama hanya mengenal versi berprefiks seperti ::-webkit-input-placeholder dan ::-moz-placeholder. Seluruh browser modern sudah memakai bentuk standar ::placeholder, sehingga prefiks tersebut hanya perlu ditambahkan bila proyek memang menargetkan browser yang jauh lebih lama.

Karena placeholder menghilang begitu kolom terisi, hindari menaruh instruksi panjang di dalamnya — aturan format yang penting sebaiknya ditulis di label atau teks bantuan di bawah kolom, sehingga tetap terbaca saat pengguna sedang mengetik.

Placeholder Bukan Pengganti Label #

Perbandingan singkat membantu menempatkan keduanya:

:placeholder-shown Mendeteksi Input Kosong #

Berbeda dari ::placeholder yang pseudo-element, :placeholder-shown adalah pseudo-class: ia mencocokkan elemen input itu sendiri, tepat ketika placeholder sedang tampil — artinya kolom masih kosong:

.kolom-form {
  border: 2px solid #d9d2c0;
  border-radius: 10px;
  padding: 10px 14px;
}

.kolom-form:placeholder-shown {
  border-color: #f4b942;
}

Begitu satu karakter diketik, placeholder tampil dan pseudo-class berhenti cocok — pencocokan berjalan otomatis tanpa JavaScript karena browser yang menghitung state kolomnya.

Pola lanjutan yang menarik: dikombinasikan dengan :not(), kita mendeteksi kolom yang sudah terisi — dasar dari efek floating label yang akan kita bangun di section Styling Forms dan Controls:

.kolom-form:not(:placeholder-shown) {
  border-color: #1f6f54;
}

Pola ini memberi umpan balik “sudah ada isinya” tanpa satu baris JavaScript. Bandingkan dengan :empty pada chapter sebelumnya: :empty memeriksa isi elemen apa pun, sedangkan :placeholder-shown khusus membaca kondisi kontrol form.

Ketik satu karakter pada salah satu kolom demo berikut untuk melihat perpindahan state-nya:

Ringkasan #

::placeholder menata teks petunjuk pada input dan textarea — ingat opacity bawaan yang perlu ditimpa bila warna terasa terlalu pucat, dan ingat pula bahwa placeholder bukan pengganti label. Pseudo-class :placeholder-shown melengkapinya dengan mendeteksi kolom kosong, membuka pola deteksi terisi tanpa JavaScript. Section ini kini sampai di ujungnya: chapter penutup menyatukan seluruh state yang kita kuasai — hover, focus, active, disabled — menjadi satu komponen tombol yang konsisten.