Address

Perm. Handayani, Jl. Handayani, Pekanbaru, Riau

Contact

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.

cara ubah warna placeholder

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

cara ubah warna placeholder

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!


administrator

Eko Pramono lebih akrab disapa Pram, seorang web developer, suka nulis, suka ngegame, dan suka turing. Bekerja di salah satu perusahaan Digital Marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.