Mengganti Warna Placeholder di CSS

lebakcyber.net – Mengganti warna placeholder di CSS. Pada kesempatan kali ini kita akan membahas mengenai bagaimana cara merubah warna pada placeholder dengan menggunakan CSS.

Pada beberapa tutorial CSS sebelumnya juga kita sudah sempat membahas mengenai :

Sekarang ini placeholder sudah sering digunakan pada hampir semua desain website untuk memberikan penamaan pada form yang dibuat agar membuat tampilan menjadi lebih menarik dan juga interaktif tentunya.

Placeholder sendiri merupakan fitur yang ada pada HTML 5 dan dapat digunakan untuk memberikan penamaan pada sebuah form dan terletak didalam form tersebut serta tulisan yang ada pada placeholder tidak akan berpengaruh pada saat form di submit.

Sekarang langsung saja kita coba praktekan bagaimana cara merubah warna pada teks yang ada pada placeholder dengan menggunakan CSS. Seperti biasa, silahkan buat sebuah file style.css dan juga index.html lalu masukan perintah dibawah ini :

style.css

body{
    background: #3FBFBF;
    font-family: arial;
    text-align: left;
}
 
h1{
    color: #fff;
}
 
/*contoh1*/
/*support google chrome*/
.contoh1::-webkit-input-placeholder{
    color: red;
}
 
/*support mozilla*/
.contoh1:-moz-input-placeholder{
    color: red;
}
 
/*support internet explorer*/
.contoh1:-ms-input-placeholder{
    color: red;
}
 
 
/*contoh2*/
/*support google chrome*/
.contoh2{
    margin: 10px;
    font-size: 12pt;
    padding: 10px;
}
 
.contoh2::-webkit-input-placeholder{
    color: blue;
}
 
/*support mozilla*/
.contoh2:-moz-input-placeholder{
    color: blue;
}
 
/*support internet explorer*/
.contoh2:-ms-input-placeholder{
    color: blue;
}
 
 
/*contoh3*/
/*support google chrome*/
.contoh3{
    margin: 10px;
    font-size: 13pt;
    padding: 10px;	
    background: transparent;
    color: #fff;
    font-family: arial;
    border: none;
}
 
.contoh3:focus{
    outline: none;
}
 
.contoh3::-webkit-input-placeholder{
    color: white;
}
 
/*support mozilla*/
.contoh3:-moz-input-placeholder{
    color: white;
}
 
/*support internet explorer*/
.contoh3:-ms-input-placeholder{
    color: white;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Merubah Warna Placeholder menggunakan CSS | lebakcyber.net</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Mengganti Warna Placeholder <br/> 
    lebakcyber.net</h1>
    
    Nama : <input class="contoh1" type="text" placeholder="Masukkan Nama Anda...">
 
    <br/>
    
    Kelas : <input class="contoh2" type="text" placeholder="Masukkan kelas Anda...">
 
    <br/>
    
    Alamat : <input class="contoh3" type="text" placeholder="Masukkan alamat Anda...">
    
    
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Pada style.css perhatikan perintah ::-webkit-input-placeholder agar support pada browser google chrome, :-moz-input-placeholder agar support pada browser Mozilla dan -ms-input-placeholder agar support pada browser Internet Explorer.

Oke jadi seperti itulah bagaimana cara mengganti warna pada placeholder dengan menggunakan CSS. Semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar CSS selanjutnya ya.

Lebak Cyber Tips dan Trik Komputer

Mengganti Warna Placeholder di CSS