Πλαίσιο αναζήτησης CSS3

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο HTML

<style type="text/css">
#search{}#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5fN6ZveyPn8H31ExPNbSj2LRNsK9UGzHEXBa__fJyqdnHSsnAqhxyhnfR64WyiLZdFNm7PDhFVOTbYhqYXZLiQe_klEcvmgYjSah9q43d3iO49VToUm8dlAKnVeWsW_w7OnwMDLiq29A/s20/Search-icon.png) no-repeat 5px 5px #444; border:0 none; font:bold 12px Arial,Helvetica,Sans-serif; color:#d7d7d7; width:150px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 2px rgba(0,0,0,0.3); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; -webkit-transition:all 0.7s ease 0s; -moz-transition:all 0.7s ease 0s; -o-transition:all 0.7s ease 0s; transition:all 0.7s ease 0s}#search input[type="text"]:focus{ background:#fcfcfc; color:#6a6f75; width:200px; -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; text-shadow:0 2px 3px rgba(0,0,0,0.1)}
</style>
<center><form method="get" action="/search" id="search">
<input name="q" type="text" size="50" placeholder="Search Here..." />
</form></center>

Αλλάζοντας τα width:150px  width:200px  προσαρμόζεται όπως το θέλετε!

Αφήστε τα σχόλιά σας εδώ κάτω.