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.

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.

• TAGS:
• CSS
• Google
• HTML
• Javascript
• jQuery
• Tutorial