Make Funky Search Box

Membuat search box alias kotak pencarian masih lumayan hangat diangkat menjadi topik postingan ;)) Basicly mungkin mirip dengan artikel berikut Make Animated Search Box use CSS3. Karena membaca artikel Kotak Penelusuran dalam Simbol alasan itulah Koben akan membuat versi CSS. Serupa tapi tak mirip lah namun memiliki fungsi dan efek yang sama ;)
Kenal dengan web berikut Apple lihat pada bagian kotak pencariannya! Ketika di klik (:focus) maka terlihat efek melebar. Dengan trik tersebut kita akan membuat search box mirip dengan tutorial kotak penelusuran dalam simbol.

Sekalian gue post juga deh tutorial membuat Apple Search Box Style.

#appel #search input[type="text"] {
 background: url(SEARCH-ICON-HITAM 13 x 13.PNG) no-repeat 10px 8px #555;
 border: 0 none;
 font: bold 12px Arial,Helvetica,Sans-serif;
 color: #eee;
 width: 101px;
 padding: 6px 15px 6px 35px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
 -webkit-transition: all .7s ease 0s;
 -moz-transition: all .7s ease 0s;
 -o-transition: all .7s ease 0s;
 transition: all .7s ease 0s;
}
#appel #search input[type="text"]:focus {
 background: url(SEARCH-ICON-PUTIH 13 x 13.PNG) no-repeat 10px 8px #f3f3f3;
 color: #6a6f75;
 width: 212px;
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 rgba(85, 85, 85, .9) inset;
 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 rgba(85, 85, 85, .9) inset;
 box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 rgba(85, 85, 85, .9) inset;
}

Ganti search-icon-hitam 13 x 13.png & search-icon-putih 13 x 13.png dengan image resolusi 13px x 13px. Aturlah width sesuai selera.

Markup HTML<div id="appel">
<form method="get" action="/search" id="search">
<input name="q" type="text" placeholder="Search..." />
</form>
</div>Kotak Pencarian Hanya Simbol yang Terlihat

#search-block {
  display: inline-block;
}
#search-block input[type=text] {
  height: 38px;
  color: #333;
  border: none;
  padding: 0 0 0 35px;
  margin: 0;
  background: #eee url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnosMfz8c6TVvPEVFS47foajAzIZ8fG0v3iycBJ09bAshmbtkoCR8ZdHZ-JmjceH30vXlDpkXylHN7ChEVDuwcxFvNIjm9cE8wCrxdDNiqPjtCjl9C3B7Nrfb_pvH8U4p0xmHpPj9m6U/s1600/search-icon.png') 12px 13px no-repeat;
}
#search-block #searchform div {
  margin: 0;
}
#search-block #s {
  float: right;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  width: 0;
}
#search-block #s:focus {
  background-color: #fff;
  width: 212px;
}
#searchsubmit {
  display: none
}

Markup HTML<div id='search-block'>
<form action='/search' id='searchform' method='get' target='top'>
<input id='s' name='q' title='Click for look search box' type='text'/>
<input id='searchsubmit' type='submit'/>
</form>
</div>Atur-atur warna, tinggi & lebar sesuai kebutuhan. Good luck :)
Happy coding \m/