Blue Glowing Search Box For Blogger

5/27/2013 CSS , Widgets 0 Comments

Install It Into Blogger

<form _lpchecked="1" action="/search" class="search-form" id="searchform" method="get">
<fieldset>
<input id="s" name="q" onfocus="if(this.value=='Search...')this.value='';" onwebkitspeechchange="transcribe(this.value)" type="text" value="Search..." x-webkit-speech="" />
<input class="sbutton" id="search-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dd5iRbU7wCWbAyrem2_8bLAXTwcpZtHJPMnl7L7qKKLqnx7luHrN5n1fylSlYR2HnlCbkbB98AkZxmUu4k6HkWY3x69y1jO2srVHjyy5KfFMWGR7w5kk6Z77hiCzHNUI1SOGlVfrUuU/s1600/search%5B1%5D.png" style="border: 0; vertical-align: top;" type="image" />
</fieldset>
</form>
<style>
#searchform fieldset {
float: left;
color: #888;
border: 1px solid #DFDFDF;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
width: 98%;
margin: 3px;
}
#searchform fieldset:hover {
border: 1px solid #41B7D8;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
}
#searchform {
margin: 0 10px 10px 0;
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
#s {
float: left;
color: #888;
background: none;
border: 0;
width: 80%;
padding: 0.6em;
}
#searchform .sbutton {
cursor: pointer;
padding:8px;
float:right;
}
</style>