Creating stylish search boxes
Search boxes are found all over the Internet, almost every site, blog and even personal sites are using them. Most often you will come across these old and ugly search form which have a simple text input box and to the right of it a simple ugly “submit” (or “search” button).
Today, I will walk you through the steps of properly designing and creating a simple search form. We will use background graphics, custom search graphic and jQuery in order to bump up the usability of the form.
Form Design
We’ll start by creating a new document in Photoshop,
Start out by creating a box using the marquee tool, and apply some styling to it.
Drop Shadow
Gradient Overlay
Stroke
The next step would be to slice the image, and create a place it within an html file.
The HTML Code
Create a folder with the following folders and files in it
- images
- Your form background image created in the previous step.
- index.html
Open the index.html file and place the following code in it
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Awesome Search Form</title>
</head>
<body>
<form id="awesome-form">
<input type="text" />
<input type="submit" value="" />
</form>
</body>
</html>
As you can see above, we will be creating a simple form with only a text field and a submit field. So far if you save the file and preview it in your browser you will get the following results:
Nothing to fancy for now. Lets add couple of style, including centering the form in the center of the page, and applying the background we’ve created in Photoshop before.
CSS Code
<style>
#awesome-form {
width:300px;
height:90px;
margin:250px auto;
background:url(images/search_bar.png) no-repeat;
position:relative;
}
#awesome-form input[type=text] {
background: none repeat scroll 0 0 transparent;
border: medium none;
height: 16px;
left: 13px;
position: absolute;
top: 14px;
width: 185px
}
#awesome-form input[type=submit] {
background: url('images/search-icon.png') no-repeat transparent;
border:medium none;
cursor:pointer;
height:40px;
width:37px;
position:absolute;
right:30px;
}
</style>
In the snippet above, we have centered the form, and added a background image. Next we have removed the default background and borders from both the input box and the submit box.
Next we have downloaded this magnifying glass icon from an icon site
And we will add it to the form by styling the submit button
#awesome-form input<strong>[</strong>type<strong>=</strong>submit<strong>]</strong> <strong>{</strong>
background<strong>:</strong>url<strong>(</strong>images<strong>/</strong>search-icon.png<strong>)</strong> no-repeat transparent<strong>;</strong>
border<strong>:</strong> medium none<strong>;</strong>
cursor<strong>:</strong> pointer<strong>;</strong>
height<strong>:</strong> 65px<strong>;</strong>
width<strong>:</strong> 65px<strong>;</strong>
position<strong>:</strong> absolute<strong>;</strong>
right<strong>:</strong> 30px<strong>;</strong>
<strong>}</strong>
At this point we should have something similar to this
The only thing we have left is some javaScript. We want the form to be automatically emptied when the user clicks on it, and if the user leave the text field without typing anything else we would like to have the original text re-appear.
JaveScript
The first step would be to add the jQuery library to the html page by typing in the following code before the closing body tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Than we will add the following JavaScript code below the jQuery statement:
<script>
$(document).ready(<strong>function</strong>() {
<strong>if</strong>($('#awesome-form > input:text')) {
$searchTxtBx = $(' #awesome-form > input:text');
$searchTxtBx.val($searchTxtBx.attr('title'));
$searchTxtBx.focus( <strong>function</strong>() {
<strong>if</strong> ($searchTxtBx.val() == $searchTxtBx.attr('title')) {
$searchTxtBx.val('');
}
});
$searchTxtBx.blur( <strong>function</strong>() {
<strong>if</strong> ($searchTxtBx.val() == '') {
$searchTxtBx.val($searchTxtBx.attr('title'));
}
});
}
});
</script>
The last thing we need to do is to add a title tag to the input form since this is what the jQuery script will be validating against.
You can view a live demo here
Alternatively, download the source code here
I hope you have enjoyed my tutorial; I would love to hear back from you.
thanks for your efforts
the right code
#awesome-form input[type=submit] {
background: url(‘images/search-icon.png’) no-repeat transparent;
border:medium none;
cursor:pointer;
height:40px;
width:37px;
position:absolute;
right:30px;
}
Thank you for catching it. I will update the post
Thanks alot for the information , it was very helpful. thx