WordPress search form and input type=”image”

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>