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!

https://w3lessons.info/wp-content/uploads/2012/12/css-search-box-design1.pnghttps://w3lessons.info/wp-content/uploads/2012/12/css-search-box-design1-150x150.pngkarthikeyanCSS3FreebiesWeb DesignCascading Style Sheets,freebies,search boxI 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!PHP, HTML5, CSS, jQuery, Angular, Facebook Style Scripts & demos

Related Posts