replace input with image
form#search-form {
border: 1px solid #000000;
height: 50px;
line-height: 50px;
vertical-align: middle;
input.search-field {
border: none;
padding: 5px 10px;
width: calc(100% - 55px);
&:focus {
outline: none;
}
}
input.searchicon {
display: inline-block;
height: 20px;
vertical-align: middle;
&:focus {
outline: none;
}
}
}
<form role="search" method="get" id="searchform2" action="<?php echo home_url( '/' ); ?>">
<input type="search" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="Search …" title="Search for:" class="search-field" />
<input type="hidden" id="searchsubmit" />
<input type="image" class="searchicon" src="<?php echo get_template_directory_uri(); ?>/images/icon-search-white.png" alt="Submit Form" />
</form>