Today I will introduce how to use background images in CSS to design your search box. I've used other methods to implement my form and search box before, but this method seemed to be easier, so I thought I'd share it with anyone who's interested.
View Demo
original method First let us take a look at my original method of using <input type="image" src="image_url" />:
<form method="get" id="searchform" action=" http:/ /www.sohtanaka.com/ ">
<fieldset>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
</fieldset>
</form>This looks good, but there is a downside. The image button does not line up with the search box. I had to use a negative margin-top attribute to fix this bug.
the original method
In this improved version of the method, I decided not to use type="image" but to use the <button> tag and then add the background using CSS. This allows text input boxes and buttons to align automatically. I also added a :focus pseudo-class to the final effect (IE will not support this, so I added a special style for IE to hide this effect). Here are some benefits of this approach:
Natural alignment using only one image for buttons and input fields
The :focus pseudo-class supports browsers that add hover effects to buttons.
HTML
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>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;
}IE special comments
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE style-ie.css
A friend commented that IE6 and IE7 would scroll the background image horizontally if you input too much text, so my approach was to use a separate background image specifically for IE, and instead of aligning it to the left, I flipped it and aligned the background image to the right. to fix this.
.search input.box {
background: url(search_bg_ie.gif) no-repeat right bottom;
/* An independent background image specifically for IE, and this image must be right-aligned. ***/
}