Re-create Google's Search Input Field and Submit Button

Written by Syung Hong on 04 Jul 2011
160,213 Views • Tutorials

Introduction

Most likely, you have used Google to search something so you're probably familiar with their search form. In this tutorial, I'll show you how to re-create it with some lightweight HTML, CSS and JQuery combination. Google has an ingenious way of adding subtle usability enhancements. In their search input field, you may or may not have noticed that the "X" delete button appears as you type something and disappears if the field is empty. With a few lines of JQuery, you can implement the same effect. I'll also show you how to re-create Google's new search button with some simple CSS settings. We'll put it all together and you'll have a minimal Google search form clone that you can use on your own website.

Google Search Clone

HTML

We'll need to mark-up the input text field, the "X" text delete button and the submit button. We combine all three of the elements and place them inside a div container.

<div id="searchContainer">
	<form>
		<input id="field" name="field" type="text" />
		<div id="delete"><span id="x">x</span></div>
		<input id="submit" name="submit" type="submit" value="Search" />
	</form>
</div>

CSS

Now, let's clone the look of Google's search form.

/* div container containing the form  */
#searchContainer {
	margin:20px;
}

/* Style the search input field. */
#field {
	float:left; 
	width:300px; 
	height:27px; 
	line-height:27px;
	text-indent:10px; 
	font-family:arial, sans-serif; 
	font-size:1em; 
	color:#333; 
	background: #fff; 
	border:solid 1px #d9d9d9; 
	border-top:solid 1px #c0c0c0; 
	border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
	float:left; 
	width:16px;
	height:29px; 
	line-height:27px; 
	margin-right:15px; 
	padding:0 10px 0 10px;
	font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
	font-size:22px; 
	background: #fff;  
	border:solid 1px #d9d9d9; 
	border-top:solid 1px #c0c0c0; 
	border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
	color:#A1B9ED; 
	cursor:pointer;
	display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
	color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
	cursor:pointer; 
	width:70px; 
	height: 31px; 
	line-height:0; 
	font-size:0; 
	text-indent:-999px;
	color: transparent;  
	background: url(ico-search.png) no-repeat #4d90fe center; 
	border: 1px solid #3079ED; 
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px; 
}
/* Style the search button hover state */
#submit:hover {
	background: url(ico-search.png) no-repeat center #357AE8; 
	border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

Javascript

Here we have two parts. First, we'll need to emulate the appearance and disappearance of the "X" button. On the event of "keyup" on the search input field, make the "X" button appear or fade in. Also check if the search input field is empty on "keyup". If it is, fade the "X" button out. On the second part, we'll need to have an on click event when the user clicks on the "X" button. When the "X" button is clicked, we'll have to clear any text in the search input field and also hide the "X" button.

$(document).ready(function() {
	// if text input field value is not empty show the "X" button
	$("#field").keyup(function() {
		$("#x").fadeIn();
		if ($.trim($("#field").val()) == "") {
			$("#x").fadeOut();
		}
	});
	// on click of "X", delete input field value and hide "X"
	$("#x").click(function() {
		$("#field").val("");
		$(this).hide();
	});
});

Conclusion

Now, you have created a minimalistic search form that looks just like Google's search form but with a lot less code. Also, customization is easy if you want to use it on your own website or your client's website. Just change the background and border colors of the search button to match the color scheme of the website. Well, I hope you found the tutorial useful and I look forward to writing more simple and short tutorials on Queness.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

23 comments
Dale 11 years ago
Hi,
Link broken?
Reply
WG 10 years ago
Yep! It definately is.

Author: Pls do something about this!
Reply
Roylee Wheels 11 years ago
what names should i give to all these 3 pages of separate codes ? plz reply asap
Reply
Kevin Admin 11 years ago
You can put all of them in a single file and name it whatever you want.
Reply
Sam A. 10 years ago
Sir,
The search box style, look, and functionality I've been looking for are in this sites header. Where/how can I get the code for it?

Tanks,
Sam A.
Reply
Charlie 9 years ago
Its nice to suggest this tips. I had been looking for search box style and was trying to customize it. I also took help from experts of Logo Pearl and also got better solution.
Reply
Piotr 9 years ago
The length #field >110px, shows two crosses to close... :/
Reply