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

    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 -> codepen.io