Design Your Own Creative CSS3 & HTML5 Search Form

A neat way to spice up your blog and search form is to make your search form with HTML5 and CSS3. One of the first improvements HTML5 brings to web forms is the ability to set the placeholder text. Placeholder text is displayed when the input field is either empty or not in focus. Adding the required attribute to any input/text area element will tell the browser that a value is required before the form can be submitted. Thus, a form cannot be submitted if a required field has not been filled out. So, let's go ahead and add the required attribute to our search form elements. A search box is probably one of the most common UI elements around, and I think there is no need to explain its purpose anymore. Whether it’s about a website or a web application, to increase user experience for it, you may want to add a stylish search box.

Download Source File

we will start by creating basic HTML5 structure

<form name="SUYB" action="/search" method="get">
<input type="text" id="search-form" name="q" placeholder="Type Search...."required/>
<button type="submit" value="search">Search</button>
</form>

You may have noticed the HTML5′s specific attributes like placeholder and required here’s a short description:

• placeholder- Basically, this attribute shows a text in a field until the field is focused upon, then it just hides the text.
• required- This specifies that the current element is a required part of a form submission.

HTML5 also brought us a new value for the type attribute: type="search". Though, because of cross browser inconsistency, I decided to skip it for now.

Let's style all of our core form elements. Add style given below to form element by selecting #search-form ID.

/* Style the search input field. */
#search-form {
float:auto;
width:270px;
height:36px;
line-height:15x;
text-indent:5px;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;;
font-size:.9em;
color:#444;
background: #fff;
border:solid 1px #d9d9d9;
box-shadow: 1px 0 0px #aaa;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
#search-form:focus{
border: 1px solid #446cb3;
box-shadow: 0 0 1px #446cb3;
-moz-box-shadow: 0 0 1px #446cb3;
-webkit-box-shadow: 0 0 1px #446cb3;
}

Remove :focus Style

Webkit automatically adds some styling to input elements when they are in focus. Since we'll be adding our own styles, we want to override these defaults:

*:focus {outline: none;}

Style your Placeholder Text

Here's a quick tip, if you want to style your placeholder text, there are some browser prefixes to help you:

:-moz-placeholder {
    color: #f1f1f1;
}
::-webkit-input-placeholder {
    color: #f1f1f1;
}

Now, let's stylize submit button with some CSS3 styles. Some of these are reward users who use modern browsers.

/* Form submit button */
.search-form button {
    overflow: visible;
    position: relative;
    float: auto;
    left:-6px ;
    top: 1px;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #446cb3;
    border-radius: 0 3px 3px 0;    
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  
.search-form button:hover{    
    background: #446cb4;
}  
.search-form button:active,
.search-form button:focus{  
    background: #446cb4;
    outline: 0;
    box-shadow: 0 0 1px #446cb3;
  -moz-box-shadow: 0 0 1px #446cb3;
  -webkit-box-shadow: 0 0 1px #446cb3;
}

Using the ::before Selector

Now we want to add a little triangle to our button that help direct and guide the eye. This can be done using images, but in our case we are going to do it using pure CSS.
Because it is purely a presentational element that is not vital to the page's functionality, we are going to add a small triangle that points left using the ::before pseudo selector.

/* left arrow */
.search-form button:before {  
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #446cb3 transparent;
    top: 12px;
    left: -6px;
}
.search-form button:hover:before{
    border-right-color: #446cb3;
}
.search-form button:focus:before, .search-form button:active:before {
border-right-color: #446cb3;
}   
/* remove button spacing in Firefox */
.search-form button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

here is how our final style.css should look like.

/* Style the search input field. */
*:focus {outline: none;}
#search-form {
float:auto;
width:270px;
height:36px;
line-height:15x;
text-indent:5px;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;;
font-size:.9em;
color:#444;
background: #fff;
border:solid 1px #d9d9d9;
box-shadow: 1px 0 0px #aaa;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
#search-form:focus{
  border: 1px solid #446cb3;
box-shadow: 0 0 1px #446cb3;
  -moz-box-shadow: 0 0 1px #446cb3;
-webkit-box-shadow: 0 0 1px #446cb3;
}
:-moz-placeholder {
    color: #f1f1f1;
}
::-webkit-input-placeholder {
    color: #f1f1f1;
}
/* Form submit button */
.search-form button {
    overflow: visible;
    position: relative;
    float: auto;
    left:-6px ;
    top: 1px;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #446cb3;
    border-radius: 0 3px 3px 0;     text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  
.search-form button:hover{    
    background: #446cb4;
}  
.search-form button:active,
.search-form button:focus{   
   background: #446cb4;
   outline: 0;
   box-shadow: 0 0 1px #446cb3;
  -moz-box-shadow: 0 0 1px #446cb3;
    -webkit-box-shadow: 0 0 1px #446cb3;
}
.search-form button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #446cb3 transparent;
    top: 12px;
    left: -6px;
}
.search-form button:hover:before{
    border-right-color: #446cb3;
}
.search-form button:focus:before, .search-form button:active:before{
border-right-color: #446cb3;
}     
.search-form button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}

Making it cross compatible.

We will add add normalize.css which makes all the browsers render all elements more consistently by resetting its styles.add normalize style sheet link your head section. look Like below..

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">

Go ahead and take a look at your final Look!


I hope you will enjoyed this tutorial, if you have any trouble regarding this tutorial feel free to post your comment below and also don’t forget to share this tutorial.