Home / CODING GEEK / code for fancy search form

code for fancy search form

Code for fancy search form

Here is step by step HTML and CSS example code for fancy search form field, adding this kind of search forms makes your project look stylish and modern.

code for fancy search form

STEP -1

HTML CODE

<div class=”field” id=”searchform”>
<input type=”text” id=”searchterm” placeholder=”enter your search terms here” />
<button type=”button” id=”search”>go!</button>
</div>

PREVIEW

preview-1

 

STEP-2

CSS CODE

@import url(‘https://fonts.googleapis.com/css?family=Oxygen:400,700’);

body{
background-color: #D5DFE5;
font-family: “Oxygen”;
}

.field{
/* using flexbox allows for the input field and the button line to line up together in a row */
display: flex;
position: relative;
margin: 5em auto;
width: 50%;
flex-direction: row;
}

.field>input[type=text]{
flex: 1; /* setting the flex value to 1 means that this element will be the first in the row, regardless of its order in the HTML markup of the .field div */

}

PREVIEW:

preview-2

STEP-3

CSS CODE 

.field>input[type=text]{

flex: 1; /* setting the flex value to 1 means that this element will be the first in the row, regardless of its order in the HTML markup of the .field div */
padding: 0.6em;
border: 0.2em solid #7B8BB7;
font-style: italic;
font-size: 16px;
}

.field>button{
padding: 0.6em 0.8em;
background-color: #6B8
}

PREVIEW

preview-3

STEP 4

CSS CODE

.field>button{
padding: 0.6em 0.8em;
background-color: #7B8BB7;
color: white;
border: none;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

preview-4

 

STEP 5

CSS CODE

.field{
/* using flexbox allows for the input field and the button line to line up together in a row */
display: flex;
position: relative;
margin: 5em auto;
width: 50%;
flex-direction: row;
box-shadow:
1px 1px 0 #6174a8,
2px 2px 0 #6174A8,
3px 3px 0 #6174A8,
4px 4px 0 #6174A8,
5px 5px 0 #6174A8,
6px 6px 0 #6174A8,
7px 7px 0 #6174A8
;
/* these box shadows (with no blur values) give the field div the 3D effect */
}

PREVIEW

preview-5

 

<<<DOWNLOAD CODE>>>>

About Smartz

Check Also

Lesson 2 : HTML BASIC TAGS

HTML BASIC TAGS -HTML BASIC TAGS,HTML is a markup language and consists of  various tags …

Leave a Reply