Search input custom element. Also works well with wp

search.css

/* header__search {{{3 */
/* use postcss-next */
&__search {
	text-align: right;
	cursor: pointer;
	position: relative;
	@nest & .screen-reader-text {
		position: absolute;
		left: -9999px;
		top: -99999px;
		visibility: hidden;
		width: 1px;
		height: 1px;
		margin: -1px;
	}
	@nest & .search_btn {
		/* search icon */
		cursor: pointer;
		background-color: transparent;
		color: transparent;
		border: 0;
		outline: 0;
		width: 33px;
		height: 100%;
		background-repeat: no-repeat;
		/* background-image: resolve(ico_1.png); */
		background-position: center;
		position: absolute;
		top: 0;
		right: 7px;
	}
	/* stylelint-disable-next-line at-rule-name-space-after */
	@nest
	& .search_field:hover,
	& .search_field:active,
	& .search_field:focus,
	&:hover .search_field,
	&:active .search_field,
	&:focus .search_field {
		max-width: 100%;
		opacity: 1;
		padding-right: 33px;
	}
	@nest & .search_field {
		max-width: 33px;
		width: 100%;
		padding-right: 0;
		opacity: 0;
		transition: max-width .3s ease-in-out, opacity .3s ease-in-out;
	}
}
/* header__search }}}3 */

search.html

<div class="search header__search col-3 col-m-12">
	<form role="search" method="get" id="searchform" action="">
		<label class="screen-reader-text" for="s">Поиск: </label>
		<input class="search_field" value="" name="s" id="s" placeholder="Поиск по сайту" type="text">
		<input id="searchsubmit" class="search_btn" value="найти" type="submit">
	</form>
</div>