Merubah Warna Placeholder di Input

Mungkin pada saat kalian membuat sebuah form input lalu ingin mengubah warna teksnya tapi tidak bisa dirubah sama sekali meskipun sudah ditambahkan css color pada form input tersebut. Sebenarnya untuk merubah placholder ini kita hanya perlu menambahkan kode css khususnya sendiri pada form input. Langsung saja simak karena artikelnya singkat banget

Merubah Warna Placeholder di Input

Pertama buat sebuah Form Input dulu

<div id="middle"> 
<form action=""> 
<input type="text" name="" id="" class="nama" placeholder="Masukan nama anda"> 
</form> 
</div>

Lanjut tambahkan css untuk merubah tampilannya

body{padding:0;margin:0;background:lightgreen;}
#middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35%;}
form input{border:0;border-radius:50px;outline:none;padding:20px;width:100%;text-align:left;overflow:hidden;}

Disini kita tambahkan kode khusus untuk inputnya

form input::placeholder{color: red}

Kode diatas akan merubah placholder input ke warna merah, hasilnya akan terlihat seperti berikut

See the Pen
Change Placeholder by Rian_kuno (@rian_kuno)
on CodePen.

Jadi setiap kalian ingin merubah warna pada placholder di input tambahkan kode berikut dan sesuaikan dengan css kalian

::placeholder

Bagikan Artikel ini