Senin, 04 Juli 2011

HTML5 Placeholder with CSS

placeholderPostingan 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.

AttributeChrome 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-colornono+no+no
bordernono+no+no
color+++no+no
font-size+++no+no
font-style+++no+no
font-weight+++no+no
letter-spacing+++no+no
line-heightnononononono
padding top/bottomnono+no+no
padding left/rightnono+nonono
text-decorationnono+no+no
text-transformnono+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/

Tidak ada komentar:

Posting Komentar