Uyghur Computer tech World: Styling Your Search Form with CSS

Today I would like to cover how to style your search field using background images in CSS. Previously I was using a different technique to style my forms and search fields, but this way seemed to be less of a head ache so I wanted to share it with those who are interested.

View Demo

Original Approach

First let me go over my original approach which was using as follows:

This was all fine and dandy but there was one annoying issue. The image button would not align with the search input box and I would have to add a negative top margin to correct this issue. See below for an example.
CSS Bug - Search Field

Revised Approach

With this revised approach, I decided not to go with the type="image" and used the

CSS

fieldset.search {
 border: none;
 width: 243px;
 margin: 0 auto;
 background: #222;
}
.search input, .search button {
 border: none;
 float: left;
}
.search input.box {
 color: #fff;
 font-size: 1.2em;
 width: 190px;
 height: 30px;
 padding: 8px 5px 0;
 background: #616161 url(search_bg.gif) no-repeat;
 margin-right: 5px;
}
.search input.box:focus {
 background: #616161 url(search_bg.gif) no-repeat left -38px;
 outline: none;
}
.search button.btn {
 width: 38px;
 height: 38px;
 cursor: pointer;
 text-indent: -9999px;
 background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
 background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}

Conditional Comments for IE

IE Style Sheet - ie.css
**EDIT** Ingo Chao commented that IE6+7 scrolls the background-image horizontally if the input gets more content, so my fix was to use a unique background image strictly for IE, and instead of aligning to the left, I reversed it and aligned it to the right to correct this bug.

.search input.box {
 background: url(search_bg_ie.gif) no-repeat right bottom; /* Unique Input Box background image specifically for IE, and the background position must be aligned to the right*/
}

View Demo