Fast Loading Pure CSS3 Search Box for Blogger

Today’s tutorial is on creating Apple-inspired search box or search field using CSS3 alone. The search field expands slowly when focused/clicked. This animation effect achieved purely using CSS3 transition property. Also, I have used other CSS3 properties such as border-radius, box-shadow and text-shadow to create some cool effects. This Search box is fully compatible with blogger/blogspot. I am giving a White and a Dark versions of this CSS3 search box with one step installation. Just copy below codes paste in HTML/Javascript widget and save.

White Search Box Codes

<style type="text/css">
#search{padding:0}#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVciDrrGjU6v0EEErrFNMSHQU9A53BhlrxfACMHvi-wOBrYGqzfLwOfMu6pgMdGnBYlN5k7jqoTYbI4qxcbp-oVI37YzGoSRpl6NIfEDg0zIrf8BFG1aJwmfykOyOtLw_KhUofU7DXJ5B/s20/Search-icon.png) no-repeat 5px 5px #fcfcfc; border:1px solid #ddd; font:bold 12px Arial,Helvetica,Sans-serif; color:#888; width:210px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -webkit-transition:all .7s ease 0s; -moz-transition:all .7s ease 0s; -o-transition:all .7s ease 0s; transition:all .7s ease 0s}#search input[type="text"]:focus{ width:240px}
</style>
<center><form method="get" action="/search" id="search">
<input name="q" type="text" size="50" placeholder="Search Here..." />
</form></center>

Dark Search Box Codes

<style type="text/css">
#search{}#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVciDrrGjU6v0EEErrFNMSHQU9A53BhlrxfACMHvi-wOBrYGqzfLwOfMu6pgMdGnBYlN5k7jqoTYbI4qxcbp-oVI37YzGoSRpl6NIfEDg0zIrf8BFG1aJwmfykOyOtLw_KhUofU7DXJ5B/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>

Drop your comments down here if you have any suggestions or opinions about this cool CSS3 Search box.