Cara Mewarnai Inputan Placeholder Pada Sebuah Form

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajafi cara mengubah warna atribut placeholder dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: yellow;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: yellow;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: yellow;
}
</style>
</head>
<body>

<p>Ubah warna placeholder:</p>

<input type="text" placeholder="Warna placeholder teks kuning..">

</body>
</html>

Warna Placeholder

Langkah 1) Tambahkan HTML:
Gunakan elemen input dan tambahkan atribut placeholder:
Contoh

<input type="text" placeholder="Warna placeholder teks kuning..">

Langkah 2) Tambahkan CSS:
Di sebagian besar browser, teks placeholder berwarna abu-abu. Untuk mengubahnya, beri gaya placeholder dengan selektor ::placeholder non-standar. Perhatikan bahwa Firefox akan menambahkan opacity yang lebih rendah ke placeholder, jadi kita akan menggunakan opacity: 1 untuk memperbaikinya.
Contoh

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: yellow;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: yellow;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: yellow;
}