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!


Avatar for Pram Eko

administrator

Pram Eko is devoted to exploring web trends, website developer, and writing about WordPress for almost 8 years.

3 Comments

  • Avatar for ian

    ian, 5 July 2024 @ 8:19 am Reply

    nice min, berjalan dengan baik

    • Avatar for Pram Eko

      Pram Eko, 5 July 2024 @ 8:23 am Reply

      terimakasih min

  • Avatar for namaku

    namaku, 1 September 2022 @ 10:19 am Reply

    test

Leave a Reply

Your email address will not be published. Required fields are marked *