HTML5 Placeholder with CSS

Postingan singkat sob mengenai HTML5 Placeholder. Sobat pernah melihat kotak search yang ada tulisannya, lalu tulisan tersebut menghilang kala kita mengetikan sesuatu! Coba tengok search box blog Prodigy of Head bertuliskan Type your keywords...
Itulah yang dimaksud dengan Place Holder ;)) Dulu membuat itu menggunakan script. Sekarang sudah bisa dengan hanya menggunakan CSS :) Satu hal pasti browsingan kita harus sudah update bos. Biar terlihat efeknya gito loh. Berikut tabel list CSS support for placeholder attribute.

Attribute	Chrome 10(Win 7)	Chrome 11 (Win 7)	Firefox 4(Win 7)	Safari 3.1(Win XP & OS X)	Safari 5(Win 7 & OS X)	Opera 11(Win 7)
background-color	no	no	+	no	+	no
border	no	no	+	no	+	no
color	+	+	+	no	+	no
font-size	+	+	+	no	+	no
font-style	+	+	+	no	+	no
font-weight	+	+	+	no	+	no
letter-spacing	+	+	+	no	+	no
line-height	no	no	no	no	no	no
padding top/bottom	no	no	+	no	+	no
padding left/right	no	no	+	no	no	no
text-decoration	no	no	+	no	+	no
text-transform	no	no	+	no	+	no

Secara basic penulisan CSS kayak begini
input:: -webkit-input-placeholder {}
input: -moz-placeholder {}
Contoh penulisan syntax place-holder dalam atribut input
<input type="search" placeholder="Type keywords here..." id="" />
Dengan gitu saja sudah terlihat efek place holder. Sekarang mari kita combine dengan atribut lainnya agar menghasilkan sebuah placeholder on input area.

Sama Beben dipisahkan nih penulisan kodenya buat di webkit & mozilla. Dasar saja ini mah yah, soal hiasan mah silahkan ditambah lagi dengan atribut css lain :D

/* styles for webkit */

#ben1:: -webkit-input-placeholder { 
color: #FF0000; 
font-weight: bold;
}
#ben2:: -webkit-input-placeholder {
color: #00FF00;
background: #00CCFF;
text-transform: capitalize;
font-weight: bold;
}
#ben3:: -webkit-input-placeholder {
font-style: italic;
text-decoration: overline;
letter-spacing: 3px; 
color: #999;
}
 
/* styles for mozilla */

#ben1: -moz-placeholder { 
color: #FF0000; 
font-weight: bold;
}
#ben2: -moz-placeholder {
color: #00FF00; 
background: #00CCFF;
text-transform: capitalize;
font-weight: bold;
}
#ben3: -moz-placeholder {
font-style: italic;
text-decoration: overline;
letter-spacing: 5px;
color: #999;
}

DEMO

Penulisan
<input type="search" placeholder="Type keywods here..." id="ben1" />
Reource:
www.splashnology.com
http://webdesignledger.com/tips/the-new-and-improved-way-to-create-forms-with-html5
Bye \m/