code for fancy search form

5
(1)

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>>>>

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Check Also

Top Lead Generation Strategies For Websites

0 (0) What is Lead Generation? As you all know a lead is a person …

Leave a Reply

Your email address will not be published. Required fields are marked *