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

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

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


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


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


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

/* div container containing the form  */
#searchContainer {

/* Style the search input field. */
#field {
	font-family:arial, sans-serif; 
	background: #fff; 
	border:solid 1px #d9d9d9; 
	border-top:solid 1px #c0c0c0; 

/* Style the "X" text button next to the search input field */
#delete {
	padding:0 10px 0 10px;
	font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
	background: #fff;  
	border:solid 1px #d9d9d9; 
	border-top:solid 1px #c0c0c0; 
/* Set default state of "X" and hide it */
#delete #x {
/* Set the hover state of "X" */
#delete #x:hover {
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
	height: 31px; 
	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}


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() {
		if ($.trim($("#field").val()) == "") {
	// on click of "X", delete input field value and hide "X"
	$("#x").click(function() {


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.

Author: Syung Hong

Syung Hong is an interactive web designer with a decade experience in his field. He is the owner of, a web portal for design resources, inspirations and entertainment.

Share the love


Mary Lawson
Sun, 18th November 2012
i live in Germany. I have been through hell and pain, When my husband turned against our marriage and sent me away, he said that he never wanted to see me again because he was having an affair outside with another woman. I was finally confused and so many thoughts came to my mind,when a friend finally advice me to go and visit a spell caster. As i was searching for a spell caster to help,I was scammed four {4} times by some who claimed to be real spell casters until i found the real and great spell caster on Google search who helped me and solved all my problems concerning my husband who left me since 7 months and after that a friend also complained of her husband too,So i linked her up with the same spell caster who helped me too,and the problem was also solved by the same spell caster . Whao!! the real and great spell caster is here,all you need to do now is to contact this same address whenever you are in any problem.

Mary Lawson Reply
Sat, 15th June 2013
made my day.. thx.. Reply
Tue, 30th April 2013
Link broken? Reply
Wed, 2nd October 2013
Yep! It definately is.

Author: Pls do something about this! Reply
Roylee Wheels
Tue, 14th May 2013
what names should i give to all these 3 pages of separate codes ? plz reply asap Reply
Kevin Admin
Wed, 15th May 2013
You can put all of them in a single file and name it whatever you want. Reply
Sam A.
Sat, 30th November 2013
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?

Sam A. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!