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.
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
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:
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
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;
}
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
