Tutorials

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

Written by Syung Hong on 04 Jul 2011
132,725 Views • Shares
23 comments

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
hamid 7 years ago
nice
tnx
Reply
yo 7 years ago
This is exactly what I was looking for, thanks a lot for sharing:)
Reply
eGord0n 6 years ago
Thank you very much!
Reply
dimas 6 years ago
i wasn't looking for this, but it fall to me like ring on my finger

thanks
Reply
kubakoumak 6 years ago
Here's missing the active phase of a button. But thanks - it's nice.
Reply
widyana 6 years ago
it is cools :)
Reply
Amrendra 6 years ago
I want to open text feilds and submit button in under reply option how can write a code for this ? please suggest me as soon as posible sir.
thank's
Reply
zemgo 6 years ago
how to put that in the middle?
Reply
ricardo 5 years ago
how to put that in the middle?
in the center off the search page?
Reply
Tariq Suhail 6 years ago
Tnx alot
Reply
Pera 6 years ago
Nice I will use it many pages.... great.
Reply
rwkiii 6 years ago
Enter text into search field. After a postback, typed text appears (as it should), but the x doesn't appear again until you type additional text. Is there an easy fix? Otherwise I really like this. Thank you.
Reply
Shun 6 years ago
thanks mate! working great on my blogger, though I removed the 'x' after several frustrations on making it work lol
Reply
Rafi 6 years ago
Thanks for sharing nice article
Reply
Mary Lawson 5 years ago
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 oldreligoin@gmail.com . 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
Huebl 5 years ago
made my day.. thx..
Reply