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