Wordpress search form and input type="image"

Question

I need help with this code. How can I get the search field to display when clicking on the search-icon.svg?

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field"
        placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>"
        value="<?php echo get_search_query() ?>" name="s"
        title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search-icon.svg" />

.site-header .search-field  {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 37px;
    padding: 0 0 10px 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}
.site-header .search-field:focus  {
    background-color: #fff;
    border: 2px solid #333;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit {
    display:none;
}
input[type="image"] {
    height: 30px;
}

Answer 1

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>