How To

Cara Mewarnai Inputan Placeholder Pada Sebuah Form

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;
}

Hanifah Nurbaeti

Share
Tags: CSSHow To