Wednesday , December 2 2020
Home » CSS » Mengganti Warna Placeholder di CSS

Mengganti Warna Placeholder di CSS

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 :

  1. Pengertian Dasar CSS
  2. Pengertian Selector, Property dan Value di CSS
  3. Cara Memasukan Kode CSS ke Halaman HTML
  4. Mengubah Background Dengan CSS
  5. Mengatur Padding dan Margin di CSS
  6. Mengatur Font Menggunakan CSS
  7. Membuat Hyperlink Dengan CSS
  8. Format Text di CSS
  9. Belajar Position di CSS

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.

Advertisements

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 :

Advertisements

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 :

mengganti warna placehoder di css

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.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

Desain Tabel Dengan CSS

Desain Tabel Dengan CSS lebakcyber.net – Desain tabel dengan CSS. Biasanya kalau kita membuat sebuah …

Leave a Reply

Your email address will not be published. Required fields are marked *