CSS Slide-Reveal Search Field

September 20, 2017

Use HTML and CSS to toggle reveal the search input field. 

Collapsed:

Expanded (on click):

HTML:

Two options:

• Place this in your theme’s searchform.php file. If you theme does not have this file, create one.
• Place in your theme where you’d like the slide-reveal search to appear (e.g., if you only want the slide-reveal in the header menu, put it there).

<form id="searchform" method="get" action="<?php bloginfo('url'); ?>">

	<div>
		<input id="s" name="s" type="text" value="" onfocus="if (this.value == '') {this.value = '';}" onblur="if (this.value == '') {this.value = '';}" size="32" tabindex="1">

		<input id="searchsubmit" type="image" src="<?php bloginfo('stylesheet_directory'); ?>/img/searchicon.png" name="search" alt="Search" class="button" />
	</div>

</form>


CSS:

#searchform {
	position: absolute;
	right: 0;
	top: 0;
}

#s {
	background-color: transparent;
	background-image: url(img/searchicon.png);
	background-position: 99% center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 30px 0 5px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

#s:focus {
	background-color: #fff;
	border: 1px solid black;
	cursor: text;
	outline: 0;
	width: 230px;
}
/*
#searchsubmit { 
	display:none;
}
*/

Sourced here.