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.
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.

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
Kode CSS ubah warna placeholder
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:
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: green;
}
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: green;
opacity: 0.5; /* Firefox */
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: green;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color: green;
}
input::-moz-placeholder { /* Firefox 19+ */
color: green;
}
input:-moz-placeholder { /* Firefox 18- */
color: green;
}
Sebagai contoh implementasi kode diatas seperti berikut ini:
[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”oNExOEB” user=”pram-eko”]See the Pen
Change Input Placeholder Color by Pram Eko (@pram-eko)
on CodePen.[/codepen_embed]
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
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].

Tips Menggunakan Placeholder
Usahakan warna placeholder atau kontras yang Anda gunakan tidak sama dengan warna teks yang ada pada saat pengguna mengetikkan teks. Ini akan membantu user untuk membedakan yang mana isian dari input atau placeholder. Selain itu placeholder juga harus terlihat pada semua layar atau device. Yang lebih penting adalah placeholder tidak menghilang ketika user meng-klik input atau textarea.
Ini bertujuan untuk membantu user tidak merasa bingung atau lupa pada saat mengisi data. Demikianlah pembahasan mengenai cara merubah warna placeholder pada input atau textarea HTML. Semoga bermanfaat dan terimakasih!
3 Comments