You have to use javascript or jQuery for this form.
You can use like this:
<!-- Custom Style for the form -->
<style type="text/css">
body {
margin: 0;
padding: 30px 0;
font-family: arial;
font-size: 16px;
line-height: 22px;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
body:after {
content: '';
clear: both;
display: table;
}
img{
max-width: 100%;
display: inline;
max-height: 100%;
}
form#search-form {
float: left;
width: 80%;
display: none;
}
button#search {
float: right;
width: 20%;
padding: 8px;
height: 50px;
cursor: pointer;
text-align: center;
margin-top: 21px;
}
input.search-field {
display: block;
padding: 11px;
font-size: 20px;
width: 100%;
}
</style>
<!-- Search form-->
<form id="search-form" action="">
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search..." name="s" />
</form>
<!-- Search form button -->
<button id="search"><img src="https://image.flaticon.com/icons/svg/54/54481.svg" alt="Search Icon" /></button>
<!-- Search form script -->
<script type="text/javascript">
var button = document.getElementById("search");
button.addEventListener('click', function() {
var form = document.getElementById("search-form");
if( form.style.display === "block" ) {
form.style.display = "none";
} else {
form.style.display = "block";
}
console.log("clicked...");
});
</script>