Cara Ubah Warna Placeholder HTML

Cara ubah warna placeholder – Mungkin dari beberapa kalian belum tahu apa itu placeholder.

Dari segi istilah mungkin tahu namun belum tahu apa itu placeholder ataupun kebalikannya.

Kali ini saya akan membahas bagaimana cara ubah warna placeholder pada input, textarea dan lain sebagainya di HTML. Ada baiknya ketahui apa itu placeholder terlebih dahulu.

Apa itu Placeholder?

Placeholder adalah salah satu atribut HTML yang berfungsi sebagai penanda atau menuliskan teks pada tag input HTML.

Placeholder dapat Anda terapkan pada semua type input HTML. Manfaat dari placeholder sendiri adalah dapat membantu kepada pengguna untuk mengisi data pada input form dengan benar.

Tag HTML:

<input type="text" placeholder="Masukkan nama Anda">

Selain itu placeholder juga dapat meningkatkan tingkat penggunaan dan estetika dalam desain sebuah form. Penggunaan placeholder tentunya perlu diperhatikan, jangan sampai salah penempatan dan tidak sesuai dengan input yang diinginkan. Ini akan mengakibatkan data yang dimasukkan oleh user tidak sesuai.

Baca juga: Perbedaan Pseudo Class dan Pseudo Element CSS

Cara ganti warna placeholder pakai CSS

Jika Anda ingin merubah warna dari placeholder sesuai dengan keinginan, dapat menggunakan css.

Kode css berikut ini usahakan Anda tambahkan semua, yang bertujuan untuk dapat bekerja di semua browser seperti firefox, chrome, microsoft edge, Internet Explorer hingga safari.

Tambahkan kode berikut ini pada selektor input Anda:

/* ==========================
   Placeholder - All Browsers
   ========================== */

/* Chrome, Safari, Opera */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: green;
    opacity: 1;
}

/* Firefox 19+ */
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: green;
    opacity: 1;
}

/* Firefox 4 - 18 */
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: green;
    opacity: 1;
}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: green;
}

/* Microsoft Edge Legacy */
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: green;
}

/* Standard (Chrome, Edge Chromium, Firefox, Safari, Opera) */
input::placeholder,
textarea::placeholder {
    color: green;
    opacity: 1;
}

Kenapa Kadang Tidak Berfungsi?

Jika website masih harus mendukung browser lama seperti Internet Explorer, Edge Legacy, atau Firefox versi lama, selector ::placeholder saja tidak cukup.

Beberapa browser lama masih menggunakan vendor prefix seperti:

• ::-webkit-input-placeholder
• ::-moz-placeholder
• :-moz-placeholder
• :-ms-input-placeholder
• ::-ms-input-placeholder

Karena itu banyak developer menambahkan seluruh selector tersebut agar tampilannya tetap konsisten. Browser lama menggunakan prefix khusus sebelum standar ::placeholder diadopsi secara luas.

Tambahan Property Style

Dalam penggunaan placeholder, Anda juga dapat menambahkan property style pada placeholder.

Berikut dukungan property style yang dapat Anda terapkan untuk menabah kontrol style pada placehoder:

• opacity
• color
• word-spacing
• letter-spacing
• text-decoration
• background-properties
• vertical-align
• text-transform
• line-height
• text-indent
• font-properties

Mengubah Font Placeholder

Selain warna, Anda juga dapat mengubah ukuran dan jenis font.

input::placeholder{
    font-size:14px;
    font-style:italic;
    font-weight:400;
}

Properti seperti font-size, font-style, font-weight, letter-spacing, dan text-transform juga dapat digunakan pada placeholder selama didukung oleh browser.

Mengubah Placeholder Saat Input Focus

Anda juga bisa memberikan efek ketika pengguna mengklik kolom input.

input:focus::placeholder{
    color:#999;
}

Cara ini membuat placeholder berubah warna ketika input mendapatkan fokus.

Apakah Vendor Prefix Masih Diperlukan?

Untuk website modern, sebenarnya tidak lagi.

Saat ini hampir seluruh browser yang masih aktif digunakan telah mendukung ::placeholder tanpa prefix. Dukungan global terhadap selector ini sudah sangat tinggi, sehingga pada proyek baru Anda cukup menggunakan:

input::placeholder,
textarea::placeholder{
    color:#00a651;
}

Vendor prefix hanya diperlukan apabila website masih harus kompatibel dengan browser lawas seperti Internet Explorer, Edge Legacy, atau Firefox versi lama.

Tips Penggunaan Placeholder

Ada beberapa hal yang sebaiknya diperhatikan ketika menggunakan placeholder.

• Jangan gunakan placeholder sebagai pengganti label form.
• Gunakan warna yang tetap mudah dibaca.
• Hindari placeholder yang terlalu panjang.
• Pastikan kontras warna cukup agar mudah dilihat pengguna.

Dokumentasi HTML juga menyarankan agar placeholder hanya digunakan sebagai petunjuk singkat, bukan sebagai pengganti elemen <label> karena dapat mengurangi aksesibilitas website.

Dukungan Browser

Seperti yang sudah disampaikan pada awal pembahasan, placeholder dapat digunakan pada semua web browser.

Untuk lebih jelasnya browser apa saja yang dapat mendukung penggunaan placeholder dapat Anda cek melalui caniuse.com [klik].

Kesimpulan

Mengubah warna placeholder sebenarnya cukup mudah menggunakan ::placeholder.

Namun apabila website masih harus mendukung browser lama, sebaiknya tambahkan vendor prefix seperti ::-webkit-input-placeholder, ::-moz-placeholder, dan :-ms-input-placeholder.

Untuk proyek WordPress, Laravel, maupun website modern lainnya, penggunaan ::placeholder saja sudah lebih dari cukup.

Sedangkan pada proyek yang masih harus kompatibel dengan Internet Explorer atau Edge Legacy, menggunakan seluruh selector placeholder tetap menjadi pilihan terbaik agar tampilan form tetap konsisten di semua browser.