About

Thursday, March 30, 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



Faiz Ahmad

About Faiz Ahmad

Faiz Ahmad. Salatiga, 28 Juni 2000. Saya hanya seorang Hamba Allah yang masih banyak kekurangan, maka dari itu saya ingin menutupi kekurangan saya dengan melakukan hal yang bermanfaat kepada orang lain. Seperti filosofi tanah “Bermanfaat untuk orang sebanyak mungkin, namun dikenal oleh orang sesedikit mungkin”. Pernahkah kita mengingat jasa tanah? Sedetik saja dalam sehari? Saya rasa hanya sedikit sekali yang mengingatnya, berbeda dengan matahari yang jasanya selalu kita ingat. Padahal kita semua tentu tahu bagaimana jadinya dunia ini jika tidak ada tanah.

Subscribe to this Blog via Email :