rachelleyen
9/14/2017 - 2:43 AM

Search Form

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>