Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Thursday, 30 March 2017

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


Demikian tuturial dari saya kurang lebihnya mohon maaf. Sekian

Syukron ^^

Wassalamualaikum Wr. Wb.

Referensi



No comments:

Post a Comment

Adbox