Amazing CSS3 Search Box For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

In last article i posted about creating a custom search box for blogger and now i'am posting this totally amazing search box which is 99% CSS3 and 1% image.

So i'am going to show you how to create this and also if you just wanna add this then there is also a Add To Blogger option and you can all this search box in all type of HTML documents.

HTML :

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Me">
</form>
<style>

CSS :

#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HvEj2bNMWqo3mf6237cc1hUIj4MfX3gaRfb8fw1K2JQJm_XkoNpx1Gyt0MeLDJQDhLdjmBLRXcSZV-7wD2BII6JHo-R-dZrPAo1YRlLKvJ6j9lqjKb6iTrYepuuuV0GYhoUa2BCy5Y0/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}

So if you just wanna add this widget then just click on Add To Blogger

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.