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

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.

Author: Syung Hong

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

Share the love

21 comments

hamid
Wed, 27th July 2011
nice
tnx Reply
yo
Wed, 17th August 2011
This is exactly what I was looking for, thanks a lot for sharing:) Reply
eGord0n
Wed, 31st August 2011
Thank you very much! Reply
dimas
Wed, 31st August 2011
i wasn't looking for this, but it fall to me like ring on my finger

thanks Reply
kubakoumak
Sun, 30th October 2011
Here's missing the active phase of a button. But thanks - it's nice. Reply
widyana
Sat, 21st January 2012
it is cools :) Reply
Amrendra
Tue, 20th March 2012
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
Sat, 14th April 2012
how to put that in the middle? Reply
ricardo
Mon, 10th September 2012
how to put that in the middle?
in the center off the search page? Reply
Tariq Suhail
Tue, 17th April 2012
Tnx alot
Reply
Pera
Sat, 21st April 2012
Nice I will use it many pages.... great. Reply
rwkiii
Wed, 9th May 2012
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
Mon, 30th July 2012
thanks mate! working great on my blogger, though I removed the 'x' after several frustrations on making it work lol Reply
Rafi
Thu, 16th August 2012
Thanks for sharing nice article Reply
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 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
Sat, 15th June 2013
made my day.. thx.. Reply
Dale
Tue, 30th April 2013
Hi,
Link broken? Reply
WG
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
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

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!

Advertisement