Search bar: submit button within the search field

0 , , Permalink

I recently had a design come across my desk with with a search bar. I knew this would have to be created as a form field with a submit button, but what was different was that it was not a traditional input field with a button that read “submit”. It’s actually not unusual to see this type of style, which has an image of a magnifying glass as the submit button.

The part that required me to stop and think for a moment, was the placement of the search button. My first fast attempt at just getting something on the page was to slice the bar and the magnifying glass (icon) and absolutely position the icon inside the bar. The problem I ran into was that the text input would overlap the icon. Then I tried slicing the bar up to the icon as once piece and the icon with the remainder of the bar as the button, but that required too much fiddling with positioning I felt. And then I had my ah ha moment.

The HTML
<section class="search">
  <form method="post" action="">
    <fieldset class="search">
      <input type="text" class="box" name="s" value="Search" />
      <input type="submit" class="btn" value="" />
    </fieldset>
  </form>
</section>

Note that I found online that many people tend to use:
<input type="image" src="your_link_to_your_button_image" class="searchbox_submit" value="" />
This is fine, but it was pointed out to me that if I want to have any type of rollover effect on the button, this method would not work.

The CSS
.search {
width:200px; /* This is the width of your background image */
height:30px; /* This is the height of your background image */
background: transparent url('bkgd_image_link') 0 0 no-repeat;
margin-top:10px;
position:relative; /* This is necessary to absolutely position your search button image later */
}

.search input {border:none;} /* Prevents form input elements from having the default border placed around the element */

.search input.box {
background-color:transparent;
width:185px; /* This is the width of the search input field */
height:30px;
position:absolute; /* important */
bottom:0;
left:5px;
}
.search input.btn {
background: transparent url('link_to_your_btn_image') 0 0 no-repeat;
width:10px;
height:10px;
position:absolute; /* important */
top:5px;
right:5px;
}

In this example, .search is the container for my search bar. For this reason, I am setting my search bar image as the background image. .box is the area where the user would input the text they are searching for, and is the the input field. As I have already set my background image, I don’t want any default input styling happening, which is why I set the background-color to transparent, and specified no borders. Also notice that this element must be absolutely positioned, otherwise it would not necessarily sit on top of the search bar background image. Lastly, .btn is my submit button, which is another input field in the HTML forms world. I have absolutely positioned my button image.

And that’s all there is to creating the modern day search bar.

Comments are closed.