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

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

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

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

Than we will add the following JavaScript code below the jQuery statement:

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.

4 thoughts on “Creating stylish search boxes

  1. 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;

    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.