Thứ Ba, 22 tháng 3, 2011

Styling Your Search Form with CSS

Harry Potter and the Deathly Hallows, Part 1Styling Your Search Form with CSS

Tags:
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.

Original Approach

First let me go over my original approach which was using <input type="image" src="image-path"> as follows:
<form method="get" id="searchform" action="http://www.sohtanaka.com/">
 <fieldset>
 <input type="text" value="" name="s" id="s" />
 <input type="image" src="http://stblog.tanaka.netdna-cdn.com/wp-content/themes/st2008/images/btn_search2.gif" id="searchsubmit" value="Search" class="btn" />
 </fieldset>
</form>
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 <button> tag, and added a background with CSS. This allowed both input text box and the button to naturally align. I also added a :focus pseudo class for the final touch (IE will not read this, so I added a conditional style specifically for IE to hide this effect). Below are some benefits of this method:
  • Aligns naturally
  • Only uses one image for buttons and input box
  • :focus pseudo class for browsers that support it
  • Added hover effect for button
CSS Bug - Search Field
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;
}
Conditional Comments for IE
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
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*/
}

Additional Resources

Examples of Creative / Clean Search & Form Fields

Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms

Related Posts

Không có nhận xét nào:

Đăng nhận xét