Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

CSS Search Box Design – Windows Metro Style

/
/

I am going to share simple css search box design with html & css code. Its looks like window metro style search box.

CSS Search Box Design
CSS Search Box Design

CSS Code

         #search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}

#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}

#search button:hover {
background-color:#000;
}

Html Usage

[php] <form method="get" id="search" action="http://w3lessons.info/">
<input type="text" class="search" value="Type and hit enter" onblur="if(this.value == ”) { this.value = ‘Type and hit enter’; }" onfocus="if(this.value == ‘Type and hit enter’) { this.value = ”; }" name="s">
<button type="submit">Submit</button>
</form>
[/php]

View Demo

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

  • Facebook
  • Twitter
  • Google+
  • Linkedin