Design An Awesome CSS3 Search Box

Demo Download

Sometimes it don’t matter to a user how nice and perfect is your website’s navigation, or sometimes they don’t want to understand it. For those users, a search box is paramount, because that’s the primary way they use the web. To them search is navigation. And at this time a search box plays an very significant role in improving the User Experience your website. If this is the scenario, then why not make this searching experience pleasant. So in this tutorial we will design an awesome css3 search box.

Lets start with some HTML line. Actually there not much in HTML code, you just have to add a form and add our CSS class to give it a beautiful look.

HTML

</pre>
<form><input id="search" type="text" />
<input id="submit" type="submit" value="Search" /></form><form>
This one is animated
<input id="submit" type="submit" value="Search" />
<input id="search" type="text" /></form>
<pre>

We are done with HTML here, so lets start with our general CSS. This is for the first search box with background.

.form-wrapper-01 {
width: 450px;
padding: 10px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

And the following css will add some nice look to the input box and search button

.form-wrapper-01 #search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper-01 #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper-01 #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-size:12px;
font-style:italic;
}
.form-wrapper-01 #search:-moz-placeholder {
color: #999;
font-weight: normal;
font-size:12px;
font-style:italic;
}
.form-wrapper-01 #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-size:12px;
font-style:italic;
}
.form-wrapper-01 #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: none;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper-01 #submit:hover,
.form-wrapper-01 #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper-01 #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper-01 #submit::-moz-focus-inner {
border: 0;
}

Now lets start for the second search box which will expand when you will hover your pointer on it. We don’t have do make much changes in the above CSS, just some modifications. But still I kept the two different CSS in demo and download package. You will find this code in style2.css file. In second example we have not givind the background color to search input. So,

.form-wrapper-02 {
width: 450px;
padding: 8px;
overflow: hidden;
margin: 70px auto;
}

And following is the only code we have modified

#search {
width: 230px; /*--- we will change this width on hover effect ---*/
height: 20px;
padding: 10px 5px;
float: right;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease; /*--- These transition effect will give an animated expanding effect to the search box ---*/
}
#search:focus,
#search:hover{
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
width:330px; /*--- We have change the width from 100px to 330px ---*/
}

For second example notice the order of input boxes in HTML file. We have written the button first and then the input text box.

</pre>
<form><input id="submit" type="submit" value="Search" />
<input id="search" type="text" /></form>
<pre>

That’s it! We are done. Hope you have enjoyed this simple and awesome css3 search box tutorial.

Demo Download

Don’t forget to share your thoughts and if you can suggest some changes and enhancements to make this example better, do comment below.