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 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!