Belajar CSS Part 17 Membuat & Mengganti Warna Placeholder

Belajar CSS Part 17 Membuat & Mengganti Warna Placeholder

Assalamualaikum Wr. Wb.

Hai sobat gimana kabarnya ? semoga masih sehat hehe, Pada kesempatan kali ini kita akan membahas tentang placeholder, lebih tepatnya yaitu mengganti warna pada placeholder. Untuk lebih jelasnya lihatlah serangkaian ilmu berikut.

PENGERTIAN

Placeholder adalah salah satu fitur dari HTML5. Placeholder ini berguna untuk membuat semacam penamaan pada form. Biasanya digunakan unuk memberikan nama pada form agar lebih jelas maksud yang disampaikan. Letaknnya berada di dalam form dan tulisannya tidak berpengaruh atau mengganggu saat disubmit.

LATAR BELAKANG

Latar belakang saya belajar placeholder yaitu untuk memperjelas maksud dari form yang saya buat, dan juga agar para pengunjung mampu memahami maksud yang saya sampaikan.

MAKSUD & TUJUAN

Memudahkan dalam memperjelas maksud dari form tersebut.

Memperindah dari tampilan placeholder tersebut.

ALAT & BAHAN

LAPTOP/PC
Text Editor
Browser

LANGKAH KERJA

Untuk membuat placeholder pada form, kita tinggal menambahkan attributes "placeholder" di dalam tag form dan juga isikan valuenya agar pengunjung mengerti maksud yang anda sampaikan di dalam value tersebut.

Contoh :

Seperti yang sobat lihat pada gambar diatas itu merupakan contoh dari fungsi placeholder. Kita dapat membuat tulisan di dalam form sesuai dengan keinginan kita sendiri. Selanjutnya kita akan mengubah warna dari placeholder tersebut.

Contoh :

Untuk file CSSnya seperti ini.

body{
background: #35A9DB;
font-family: roboto;
text-align: center;
}
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: roboto;
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;
}