Expandable Search Box

Expandable search form using html and CSS.


   HTML:

<form action="/search" method="GET" target="_top" class="Search">
 
    <label class="icon fa fa-search" for="search"></label>
    <input type="text" placeholder="Search" class="underline" name="q" id="search">
</form>

HTML Explanation:

action”/search” -> search results page target
target=”_top” -> Open new window (remove this if you want open the search results it self)
name=”q” -> Query search results example https://yourdomain/search?q=keyword

&nbsp; &nbsp; CSS:

.Search {
float: right;
padding: 15px 40px 15px 0px;
position: relative;
}
.Search input {
background: #252525;
font-size: 1.5em;
font-weight: 300;
height: 50px;
position: relative;
text-indent: 46px;
width: 45px;
border: none;
transition: width 1s;
}
::-webkit-input-placeholder {
color: #fff;
box-shadow:  45px 1px 0 0 #fff;
}
.Search input:active,
.Search input:focus {
font-size: 1.6em;
font-weight: 300;
height: 50px;
position: relative;
text-indent: 46px;
width: 450px;
border-bottom: #fff solid 1px;
transition: width 1s;
}
.Search .icon {
color: #fff;
font-size: 1.6em;
height: 50px;
width: 45px;
left: 10px;
position: absolute;
top: 30px;
z-index: 1;
}

Demo ->&nbsp;codepen.io