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

0 Response to "Expandable Search Box "

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...