• RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Home > CSS, Front End Development, HTML, How to > How To Create an Advanced Search Box

How To Create an Advanced Search Box

June 25th, 2009

Tired of boring boxy search inputs. This tutorial will help you create a functional and visually pleasing search box.

Example

The Theory

How do you create a search box that is only limited by your imagination? Simple. Make your input elements invisible (no background or border), then place them on top of an element that has a background image. That way you can make the background image as crazy as you like, then just position your input elements so they line up accordingly.

Getting Started

First thing we need to do is build the form. A simple textfield, submit button, and a wrapper div will suffice. We will give the textfield and button each a class so we can reference them via CSS.

1
2
3
4
5
6
<div id="searchbox">
    <form method="get" action="http://www.devirtuoso.com">
            <input class="textfield" type="text" value="" size="24" name="s"/>
            <input class="button" type="submit" value=""/>
    </form>
</div>

The Background Image

You’ll want to design an image that has an input area, a fancy button and a focus state if you’d like it. This is the image you’ll be applying to the div wrapper. Here is the image I’ll be using.

searchBox

Here is the CSS that applies the image to the background

1
2
3
4
5
6
7
/* Give the background image to the div wrapper */
#searchbox {
    background:transparent url('searchBox.jpg') no-repeat scroll 0 0;
    display:block;
    height:38px;
    width:341px;
}

Hidding Your Inputs

Next we’ll layout our inputs and hide them so we only see the background image of the div wrapper.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
* Hide the background and border for each input.
* Also position the text field so they line up.
*/ 
#searchbox .textfield {
    background:transparent none repeat scroll 0 0;
    border:none;
    float:left;
    width:284px;
    height:23px;
}

/* Give the button a hand cursor for when people roll over it.*/
#searchbox .button {
    background:transparent none repeat scroll 0 0;
    border:none;
    cursor:pointer;
    float:left;
    height:22px;
    width:18px;
}

The height and width should be the same size as the input elements in your image. Measure what is in your image, and fill in the height and width properties accordingly. For example the textfield in the image is 284px wide by 23px height.

Line It Up

This will take some trial and error. Using margins and padding, align your text input to be directly over top of your background image. It might be a good idea to give your input elements a 1px border to see what your doing, then remove it once your done. Here are the values I came up with for this example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#searchbox .textfield {
    background:transparent none repeat scroll 0 0;
    border:none;
    float:left;
    width:284px;
    height:23px;
   
    /* Values to align textfield with wrapper background Image*/
    margin-right:17px;
    margin-left:10px;
    margin-top:8px;
    padding-top:2px;
}

#searchbox .button {
    background:transparent none repeat scroll 0 0;
    border:none;
    cursor:pointer;
    float:left;
    height:22px;
    width:18px;
   
    /* Values to align button with wrapper background Image*/
    margin-top:8px;
   
}

Search Box Focus

Now we’ll make it so when a user selects the box it changes color. We’re going to change the background image of the textfield using the focus psuedo class.

1
2
3
4
5
6
7
#searchbox .textfield:focus{
     /* This is to stop google chrome from adding an outline to our input box.*/
    outline:none;
   
    /* Apply a background and position it accordingly */
    background:transparent url('searchBox.jpg') no-repeat scroll -10px -46px;
}

This one is a luxury. The way I’ve done it hear doesn’t work in IE6 and IE7. It works in all newer browsers though.

Bring it All Together

Here is the code all together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<style type="text/css" media="screen">

    #searchbox {
        background:transparent url('searchBox.jpg') no-repeat scroll 0 0;
        display:block;
        height:38px;
        width:341px;
    }
   
    #searchbox .textfield {
        background:transparent none repeat scroll 0 0;
        border:none;
        float:left;
        margin-right:17px;
        margin-left:10px;
        margin-top:8px;
        padding-top:2px;
        width:284px;
        height:23px;
    }
    #searchbox .button {
        background:transparent none repeat scroll 0 0;
        border:none;
        cursor:pointer;
        float:left;
        height:22px;
        margin-top:8px;
        width:18px;
    }
   
    #searchbox .textfield:focus{
        outline:none;
        background:red url('searchBox.jpg') no-repeat scroll -10px -46px;
    }
   
</style>
</head>
<body>
   
    <div id="searchbox">
        <form method="get" action="http://www.devirtuoso.com">
            <input class="textfield" type="text" value="" size="24" name="s"/>
            <input class="button" type="submit" value=""/>
        </form>
    </div>

</body>
</html>

Example

That’s it. Enjoy your new beautiful search boxes.

  • RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Author: Shawn Categories: CSS, Front End Development, HTML, How to Tags: , , , ,
Comments are closed.