CSS: how to create a stylish search input box

Tweet

The search capability in modern web sites is an established feature. Visitors should always have the possibility to look for text or else, and search a whole site for specific things.
A search form can stay anywhere, however, it seems that the best way is to insert the feature on every page, possibly in the top right corner. If we browse all major web sites, we will notice that the search box is always there, ready to be used when needed.

In the following post, we will create a search form and style it a bit. The resulting box will be:

Search Box

Note that the above is an image, so please do not try to use it.
Ok! Now let's try to build it. We are going to use plain HTML and CSS.

First of all the HTML

The HTML behind the search box is plain and simple. We need an input box and a button. The image inside the button will be something like:

Magnifying Glass

I know it is quite small, but it's all we need.(The above png is meant to be displayed on light background, that is why it won't look great on this page).

The search box, as said, is an input box and a button, all wrapped inside a container div. Let's see the code:

<div class="container">
  <form>
    <input name="search" type="text" class="search" value="Search..."><button name="button" title="Search" class="button"><img src="l.png" alt="Search" class="mg"></button>
  </form>
</div>

In details, the div has a class="container".
The form has no attribute in the example, you can add them according to your needs.
The input tag has a class="search".
The button tag has a class="button".
And finally the image (l.png) has a class="mg".

We are going to create rules for the container, the search box, the button and the image.

The CSS

Let's start from the beginning: the container div:

<style type="text/css">
.container {
    margin: 0px;
    padding: 0px;
    display: inline;
}

Nothing special here.
The input box ("search" class):

.search {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    background-color: #EEEEEE;
    height: 20px;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    float: left;
    display: inline;
    vertical-align: middle;
}

Here we set the borders which are all the same except for the right hand side one. We then set the background color to a light grey (#EEEEEE).
The height is set to 20px with no margin and no padding. Note that we float the box to the left.
Now the button ("button" class):

.button {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    height: 22px;
    width: 20px;
    vertical-align: middle;
    font-size: 12px;
    background-color: #EEEEEE;
    float: left;
    display: inline;
}

The button has styles very similar to the input box. This time, the only missing border is the left hand side one, so that our search box will look like as whole piece. Note that the height is set to 22px: it is important that the button height is greater than the input box height. The button height value should always be the input box value + the top and bottom border heights (in our example is 20+1+1).
Now the image ("mg" class):

.mg {
    margin: 0px;
    padding: 0px;
}

As you can see, the CSS is not that complicated. The final result will work in FireFox, IE 6+, Opera, Safari and Chrome.

Hope you enjoyed the above. Let me know what you think about it.