5 Styles Fluid Search Box/Bar

Most websites come with a search box where the reader wants to look for certain information straight away, rather than simply browsing from link to link. As a must-have element, this feature also improves surfing experience. So today, i'll share the fluid search box that have been placed in this blog, and another 4 extra styles.

Before this, I always prefer designing templates with fixed width. Since the day responsive web design (RWD) came to my journal, I've changed my thought to not hate liquid layout. And because of that, after a month I redesign my previous blog's theme as you can see the new look right now.

fluid search box

Okay, lets go back to the fluid search box. It uses only CSS; pure CSS believe me. The CSS3 properties behind it may be ignored but the fallbacks work just nice; I think.


The HTML


<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='type here' type='text'/>
    <button id='search-button' type='submit'><span>Search</span></button>
  </form>
</div>

The placeholder attribute shows text in a field until the field is focused, then hides the text. By the way, it's a new capability that belongs to HTML5. According to W3School, It's supported in all major browsers, except IE. I tested in Firefox 3 and it doesn't show the hint :(

<button> tag also used to create a form. Unlike the <input type="button"> tag, <button> tag doesn't require <form> as its parent. It can stand alone and wrap an image to create fancy button. If you don't prefer this tag, replace the line with this;

<input id='search-button' type='submit' value='Search' />


The CSS


STYLE 1


We start with the simplest style, and some of the code below will be used also for the next 4 styles. So, I'm not going to repeat the same code again and again.

#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}

#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}

#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}

#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #999;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}


STYLE 2


Use these instead of the above CSS for #search-form and #search-button.

#search-form {
    height: 40px;
    border: 1px solid #aaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: inset 0 0 5px #bbb;
    -moz-box-shadow: inset 0 0 5px #bbb;
    box-shadow: inset 0 0 5px #bbb;
    overflow: hidden;
}

#search-button {
    position: absolute;
    top: 1px;
    right: 1px;
    height: 40px;
    width: 79px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-width: 0;
    border-left: 1px solid #aaa;
    -webkit-border-radius: 0px 3px 2px 0px;
    -moz-border-radius: 0px 3px 2px 0px;
    border-radius: 0px 3px 2px 0px;
    background-color: #bbb;
    background: -moz-linear-gradient(top, #c9c9c9 0%, #999999);
    background: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#999999));
    -webkit-box-shadow: -4px 0px 3px -2px #ddd;
    -moz-box-shadow: -4px 0px 3px -2px #ddd;
    box-shadow: -4px 0px 3px -2px #ddd;
    cursor: pointer;
}


STYLE 3


#search-form {
    height: 40px;
    border: 1px solid #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: inset 2px 2px 4px #ccc;
    -moz-box-shadow: inset 2px 2px 4px #ccc;
    box-shadow: inset 2px 2px 4px #ccc;
    overflow: hidden;
}

#search-button {
    position: absolute;
    top: 1px;
    right: 1px;
    height: 40px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-width: 0;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
    background-color: #bbb;
    background: -moz-linear-gradient(top, #aaaaaa 0%, #b9b9b9);
    background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#b9b9b9));
    -moz-box-shadow: inset 0px 2px 4px #9a9a9a;
    -webkit-box-shadow: inset 0px 2px 4px #9a9a9a;
    box-shadow: inset 0px 2px 4px #9a9a9a;
    cursor: pointer;
}


STYLE 4


#search-form {
    height: 40px;
    border: 1px solid #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: inset 2px 2px 4px #ccc;
    -moz-box-shadow: inset 2px 2px 4px #ccc;
    box-shadow: inset 2px 2px 4px #ccc;
    overflow: hidden;
}

#search-button {
    position: absolute;
    top: 5px;
    right: 4px;
    height: 32px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    text-shadow: 1px 1px 0px #888;
    border-width: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #bbb;
    background: -moz-linear-gradient(top, #aaaaaa 0%, #b9b9b9);
    background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#b9b9b9));
    -webkit-box-shadow: inset 0px -1px 1px #888, 0px 2px 2px #ccc;
    -moz-box-shadow: inset 0px -1px 1px #888, 0px 2px 2px #ccc;
    box-shadow: inset 0px -1px 1px #888, 0px 2px 2px #ccc;
    cursor: pointer;
}


STYLE 5


#search-form {
    height: 42px;
    border-width: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: inset 0px 0px 0px 1px #ccc;
    -moz-box-shadow: inset 0px 0px 0px 1px #ccc;
    box-shadow: inset 0px 0px 0px 1px #ccc;
    overflow: hidden;
}

#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    text-shadow: 1px 1px 0px #888;
    border-width: 0;
    border-left: 5px solid #fff; /*pse match to parent background color*/
    -webkit-border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
    background-color: #bbb;
    background: -moz-linear-gradient(top, #aaaaaa 0%, #b9b9b9);
    background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#b9b9b9));
    -webkit-box-shadow: inset 0px -1px 1px #888, -2px 0px 0px -1px #ccc;
    -moz-box-shadow: inset 0px -1px 1px #888, -2px 0px 0px -1px #ccc;
    box-shadow: inset -1px -1px 1px #888, -2px 0px 0px -1px #ccc;
    cursor: pointer;
}


I should mention here that there is line-height issue for input element in Firefox. We can't manipulate line-height at all (at least until now) to align text inside (i.e the word 'Search' looks 2px lower). Using padding and span seems likely helpful. So, you may change the selector to style the span element instead of the button itself. You just need to add span to the selector;

#search-button span {
   ...
}

Now, the alignment looks better but the button brings us nowhere in Firefox. I don't know why :(
BTW, hope you all enjoy to experiment these search boxes.
go top google+ page facebook twitter rss