Click to open the search box. In this I used the simple css and jQuery script to open and close the input text field by click the search zoom glass button.
In that I will use the simple animation to open and close the search input text field. When I click the button it will display the input text field. Then I click anywhere the mouse its will closed. Below you will see the preview and you can download the entire code below by click the download button.
Script
<script>
$(document).ready(function(){
$('.search-box').focusout(function(){
$('.search-box input').animate({
width: [ "toggle", "swing" ]}).show()
})
$('.search-box span').click(function(){
$('.search-box input').animate({
width: [ "toggle", "swing" ]}).show().focus();
});
});
</script>CSS
body{
background-color:#313131;
font-family: 'Roboto', sans-serif;
}
::-webkit-input-placeholder {
color: #000000;
}
:-moz-placeholder { /* Firefox 18- */
color: #000000;
}
::-moz-placeholder { /* Firefox 19+ */
color: #000000;
}
:-ms-input-placeholder {
color: #000000;
}
.search-container{
width:400px;
height:200px;
background-color: #ffffff;
margin:auto auto;
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
padding: 10px;
box-sizing:border-box;
}
.search-container h1{
text-align: center;
font-size:22px;
}
.search-box{
display: block;
float: right;
}
.search-box span, .search-box a{
font-size: 22px;
padding: 10px 15px;
color: #FFFFFF;
display: block;
float: left;
background-color: #C70683;
}
.search-box input{
outline: 0;
box-shadow: none;
border-width: 0;
font-size: 16px;
width:325px;
float: left;
display:none;
padding: 12px 15px;
background-color: #E6A900;
color:#ffffff;
}
.top-msg{
display: block;
float: left;
width: 100%;
text-align: center;
color: #fff;
margin: 10% 0;
}
.top-msg a{
color:#ffffff;
}HTML
<div class="search-container"> <h1>Click to Expand Search Box</h1> <div class="search-box"> <input type="text" placeholder="Search" > <span><i class="fa fa-search"></i></span> </div> </div> <div class="top-msg"> Click the search butto to expad input box and click any where to close the input box. © <a href="https://www.labw3.com">www.labw3.com</a> </div>
Download
