CSS Slide-Reveal Search Field

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

Collapsed:

Search Icon

Expanded (on click):

Search icon with hover toggle

HTML:

Place this in your theme’s searchform.php file. If you theme does not have this file, create one.

<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.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.