Metro Style Search Box V2 For Blogger

7/01/2013 CSS , Metro Style , Widgets 0 Comments

<div id='search-form-feed'>
<!--Sidebar search Box Started-->
  <form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onblur='if (this.value == "") {this.value = "Type And Hit Enter...";}' onfocus='if (this.value == "Type And Hit Enter...") {this.value = "";}' onkeyup='resetField();' type='text' value='Type And Hit Enter...'/>
</form>
</div>
<!--Sidebar search Box End-->
<style>
#search-form-feed {
padding: 0;
position: relative;
right: 0;
top: 0;
width: 250px;
}
#feed-q-input {
background: none repeat scroll 0 0 #333333;
display: block;
outline: medium none;
height: 40px;
border: 1px solid #333444;
color: #CCCCCC;
position: relative;
font-size: 10px;
padding-left: 10px;
float: right;
margin-bottom: 30px;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
width: 100%;
}
#feed-q-input:focus {
border-right: 5px solid #FF9000;
}
#search-result-container {
width: 300px;
height: 500px;
overflow: auto;
text-align: left;
position: absolute;
z-index: 9999;
padding: 10px;
right: 0;
margin: 0;
top: 27px;
display: none;
font-size: 11px;
background: #F3F3F3;
text-transform: none;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
#search-result-container li:hover &gt;
a, #search-result-container a: hover {
color: #252525;
background-color: transparent;
}
#search-result-container li {
margin: 0;
padding: 7px 8px;
list-style: none;
overflow: hidden;
word-wrap: break-word;
font: normal normal 10px Verdana, Geneva, sans-serif;
color: #141414;
background-color: white;
text-transform: none;
border-bottom: 1px dotted #29AAD3;
}
#search-result-container li a {
text-decoration: none;
font-weight: bold;
font-size: 11px;
display: block;
line-height: 12px;
text-shadow: none;
border: none;
background-image: none;
padding: 0;
font-weight: bold;
text-transform: capitalize;
}
#search-result-container li:last-child {
border-bottom: 0;
}
#search-result-container li:nth-child(even) {
background-color: #F7F7F7;
}
#search-result-container mark {
background-color: yellow;
color: black;
}
#search-result-container h4 {
margin: 0 0 10px;
font: normal bold 12px &#39;
Trebuchet MS&#39;
, Arial, Sans-Serif;
color: black;
}
#search-result-container ol {
border: 1px dotted #B8B8B8;
margin: 0 0 10px;
padding: 0 0;
overflow: hidden;
}
#search-result-container li img {
display: block;
float: left;
margin: 0 5px 1px 0;
background-color: whiteSmoke;
padding: 0;
}
#search-result-loader {
top: 85%;
position: absolute;
z-index: 999;
width: 60px;
color: #0C0C0C;
padding: 3px 5px;
margin: 0;
overflow: hidden;
font: normal bold 10px Arial, Sans-Serif;
display: none;
text-transform: capitalize;
}
</style>