Expandable search form using html and CSS.
HTML:
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:
Demo -> codepen.io
<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
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon