#CSS - #CSS3

Cara Mengganti Warna Placeholder Dengan CSS

By Diki Alfarabi Hadi
26 February 2016
CSS CSS3

Cara Mengganti Warna Placeholder Dengan CSS

Cara Mengganti Warna Placeholder Dengan CSS – apa kabar teman-teman sekalian. hehe.. semoga sehat selalu ya. bertemu lagi lewat tulisan ini. kali ini kita akan membahas tentang cara mengganti warna placeholder dengan CSS. seperti yang telah kita ketahui bersama, placeholder merupakan salah satu fitur baru di HTML5. placeholder sudah banyak di gunakan di hampir semua design website di tahun 2016. sudah dari beberapa tahun lalu sih sebenarnya. tetapi di tahun 2016 ini semakin banyak yang menggunakan placeholder untu memberikan penamaan pada form. ketika mendapatkan beberapa project membuat aplikasi, saya sendiri terkadang sering menggunakan placeholder pada form.

Pengertian Placeholder

Akan saya jelaskan juga pengertian placeholder dan cara menggunakan placeholder pada form. karena mungkin ada teman-teman yang baru mulai belajar dan baru mengetahui tentang placeholder ini.

Placeholder adalah fitur dari HTML5. placeholder berguna untuk membuat semacam penamaan pada form. biasanya di gunakan untuk memberikan nama pada form.tetapi letakkan berada di dalam form. dan tulisan nya pun tidak akan berpengaruh atau mengganggu saat di submit. baca juga tutorial penanganan form dengan php.

Langsung saja masuk ke contoh placeholder pada form. biar lebih jelas nya. karena saya sendiri juga kurang pinter menjelaskan secara bahasa. hehe..

Cara Membuat Dan Menggunakan Placeholder

Untuk membuat placeholder pada form, kita tinggal menambahlan atribut “placeholder” dan isi kan value nya dengan text yang ingin di tampilkan pada form. contohnya :

index.html

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Dan Mengganti Warna Placeholder | www.malasngoding.com</title>

</head>

<body>

<h1>Cara Membuat Dan Mengganti Warna Placeholder <br/> www.malasngoding.com</h1>

</body>

</html>

cara membuat dan menggunakan placeholder

Seperti yang teman-teman lihat pada gambar di atas. itulah fungsi dari placeholder. untuk membuat tulisan dengan tujuan memberikan penamaan pada form. nah sampai di sini kita sudah bisa membuat placeholder. lalu langkah selanjutnya bagaimana cara merubah warna tulisan placeholder? agar lebih menarik. langsung saja buat file css nya.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Dan Mengganti Warna Placeholder | www.malasngoding.com</title>

</head>

<body>

<h1>Cara Membuat Dan Mengganti Warna Placeholder <br/> www.malasngoding.com</h1>

<br/>

<br/>

</body>

</html>

style.css

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;

}

hasilnya.

cara mengganti warna placeholder dengan css

seperti yang teman-teman lihat pada contoh di atas. terdapat 3 buah contoh form yang saya buat dengan menggunakan placeholder juga. coba perhatikan pada css nya.

/*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;

}

agar di support di google chsome gunakan ::-webkit-input-placeholder, untuk support di mozila gunakan :-moz-input-placeholder. dan untuk support di internet explorer gunakan -ms-input-placeholder.

Untuk design form lebih lanjut nya perhatikan pada form contoh 3. hilagkan garis pinggir dan outline nya saat focus. berikan backround nya transparent agar tembus pandang alias tidak memiliki warna. jadi warna yang di ambil adalah warna background nya.

Oke sekian dulu tutorial kali ini tentang Cara Mengganti Warna Placeholder Dengan CSS. semoga bermanfaat.

baca juga tutorial lainnya di malasngoding.com:

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.