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

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

View Demo

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

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/12/css-search-box-design1.pnghttp://w3lessons.info/wp-content/uploads/2012/12/css-search-box-design1-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignCascading Style Sheets,freebies,search box
I am going to share simple css search box design with html & css code. Its looks like window metro style search box.CSS CodeHtml UsageView DemoPlease don’t forget to share and subscribe to latest updates of the blog.Thanks!