Categories:

Creating a slick, animated Full Screen Search Form with CSS3 and JavaScript

Created: Feb 8th, 17'

A well designed and accessible search UI encourages users to interact with your site's search function more frequently, leading to higher user satisfaction and increased page views. To that end, and with the dominance of small screen devices, the trend for search boxes has been to make them extremely large and bold. In this tutorial, we'll go over step by step how to create a slick, well engineered full screen search form that works beautifully across all modern browsers and devices.

Creating the header and search icon interface

To begin, we'll quickly put together a header section using the classic pattern of a logo on the left, and some navigational links plus the search icon on the far right, with everything centered vertically. Eventually clicking on the icon is what will trigger the full screen search box. Instead of using CSS floats, we'll turn to CSS flexbox instead to achieve this layout in a succinct, future proof manner:

CSS flex box header with logo on the left, menu links and search icon on the right
Figure #1: Header with 3 flex items inside it

The HTML:

<header>

	<a id="logo" href="http://www.javascriptkit.com"><img src="jklogosmall.gif" /></a>
	
	<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	</ul>
	
	<label for="search-terms" id="search-label"><img src="search.png" /></label>

</header>

The CSS:

body{
	padding-top: 70px; // set top padding to house the fixed header
}

header{
	position: fixed;
	width: 100%;
	display: flex;
	top: 0;
	left: 0;
	justify-content: space-between; /* space flex items evenly horizontally */
	align-items: center; /* center flex items vertically */
	background: white;
	padding: 10px 5px;
	font: bold 16px 'Bitter', sans-serif; /* use google font */
}

header, header *,
form#search, form#search *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

header ul{
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: auto; /* right align this flex child */
	margin-right: 10px;
}

header ul li{
	display: inline;
}

header ul li a{
	text-decoration: none;
	padding: 5px;
}

header #search-label{
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center; /* center flex items inside vertically */
	width: 60px;
	height: 40px;
	z-index: 100;
}

The header is set to be fixed in position and display:flex, which turns the 3 children elements inside - the logo, the UL menu, and the search box label - into flex elements, making it effortless to position these elements the way we want to. Specifically, by adding justify-content: space-between to the header, the three child elements are spaced horizontally apart evenly (we tweak the UL menu later to break from this), and with align-items: center, all the child elements are vertically centered inside the header.

Our flex box settings at this point has the 3 header components spaced apart equally on the horizontal axis, though personally I prefer the UL menu to be right aligned next to the search box label. To do this in CSS flex box, we just add margin-left: auto to the menu UL. More details on this technique here.

And finally, for the search box label, or the gateway to our full screen search form, we choose to use a label instead of a regular DIV or span, so when it's clicked on, focus is automatically set on the associated INPUT element. On mobile browsers, this behaviour also automatically triggers the mobile keyboard, which makes for good design. What may not be the best design choice is the use of an image for the "search" icon. When actually deploying you may want to opt for a SVG or icon font that scales without resolution loss, such as one from the excellent IcoMoon.

Creating the Full Screen Search Form

Now it's time for the real fun, creating the search form that's triggered by the search label we defined earlier:

Creating a slick, animated Full Screen Search Form with CSS3 and JavaScript
Figure #2: Full Screen Search Form that pops up when "search" label is clicked on

We want the form to appear when the user clicks (or taps in mobile browsers) on the search icon label, and to dismiss it when the user clicks on the label again, or anywhere outside the search field.

Lets see the markup, CSS and JavaScript that makes all this happen:

The HTML:

<div id="searchcontainer">
	<form id="search" action="#" method="post">
	<input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms...">
	<div>Press Enter to Search</div>
	</form>
</div>

For the markup we define a "#searchcontainer" DIV to contain the search form and search INPUT field.

The CSS:

div#searchcontainer{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: block;
	background: purple;
	left: -100%; /* initially position search container out of view */
	top: 90px; /* shift container downwards so the header is still visible when search is shown */
	padding-top: 50px;
	opacity: 0;
	cursor: crosshair;
	text-align: center;
	font: bold 16px 'Bitter', sans-serif; /* use google font */
	-webkit-transform: scale(.9) translate3d(-0, -50px, 0);
	transform: scale(.9) translate3d(-0, -50px, 0);
	-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s .5s;
	transition: transform .5s, opacity .5s, left 0s .5s;
}

div#searchcontainer div{
	padding: 5px;
	color: white;
}

div#searchcontainer form{
	opacity: 0;
	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);
	-webkit-transition: all .5s 0s;
	transition: all .5s 0s;
}

div#searchcontainer form input[type="text"]{
	width: 90%;
	top: 0;
	left: 0;
	z-index: 99;
	padding: 10px;
	border: none;
	border-bottom: 2px solid gray;
	outline: none;
	font-size: 3em;
	background: #eee;
}


div#searchcontainer.opensearch{
	left: 0;
	opacity: 1;
	-webkit-transform: scale(1) translate3d(0, 0, 0);
	transform: scale(1) translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
	transition: transform .5s, opacity .5s, left 0s 0s;
}

div#searchcontainer.opensearch form{
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition: all .5s .5s;
	transition: all .5s .5s;
}

@media (max-width: 480px){
	div#searchcontainer form input[type="text"]{
	width: 95%;
}
}

Lets break down the important bits in the CSS. For the #searchcontainer DIV, we set it to "position:fixed" with "top:90px" so it doesn't obscure the header element when visible while spanning the rest of the page. And speaking of visibility, the DIV is initially hidden by setting its opacity to 0, but also in addition, its left property to -100%. This ensures that the DIV doesn't overlay (and obstruct) the page when it's not visible on the screen. We didn't opt for using "visibility:hidden", as that prevents any form INPUT inside it from receiving focus, which negates the benefit of using a form LABEL element to trigger the search container's visibility.

To toggle the CSS transitions that reveal and hide the search container and search field, we dynamically add/ remove a CSS class "opensearch" to the #searchcontainer DIV using JavaScript. Inside the "opensearch" class, we define two sets of transitions, one targeting the #searchcontainer DIV, the other the INPUT field inside it. The two are run sequentially, by making use of transition-delay inside the CSS transition shorthand property to stall the later transition. The first transition runs immediately when activated, fading in and shifting downwards slightly into its final resting page the #searchcontainer DIV. Notice the "left" property is set to explicitly not transition and without delay (left 0s 0s), so the container appears in the proper coordinates horizontally immediately when opened. Contrast that with when its time to hide the container, by removing the "opensearch" class from it. The default transition property settings inside #searchcontainer stipulates that the left property in that case should also not transition, but kick in after a delay of ".5s" (left 0s .5s) into the declared value of "-100%", so the other transition properties such as "opacity" and "transform" have time to play out first.

The second transition applies to the form inside #searchcontainer (div#searchcontainer.opensearch form{}), and kicks in after the first to reveal the search INPUT itself.

The JavaScript:

var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null
var touchorclick = (ismobile)? 'touchstart' : 'click'
var searchcontainer = document.getElementById('searchcontainer')
var searchfield = document.getElementById('search-terms')
var searchlabel = document.getElementById('search-label')

searchlabel.addEventListener(touchorclick, function(e){ // when user clicks on search label
	searchcontainer.classList.toggle('opensearch') // add or remove 'opensearch' to searchcontainer
	if (!searchcontainer.classList.contains('opensearch')){ // if hiding searchcontainer
		searchfield.blur() // blur search field
		e.preventDefault() // prevent default label behavior of focusing on search field again
	}
	e.stopPropagation() // stop event from bubbling upwards
}, false)

searchfield.addEventListener(touchorclick, function(e){ // when user clicks on search field
	e.stopPropagation() // stop event from bubbling upwards
}, false)

document.addEventListener(touchorclick, function(e){ // when user clicks anywhere in document
	searchcontainer.classList.remove('opensearch')
	searchfield.blur()
}, false)

And last but certainly not least, we arrive at the JavaScript portion of the script. The first line returns a Boolean indicating whether the User Agent falls into one of the major mobile devices category. We use this Boolean to decide whether to bind to the "click" or "touchstart" event on the various elements. Mobile devices also support "click" any way should our Boolean fail to properly categorize a mobile device in use, though "touchstart" reacts more quickly, without the infamous 300ms delay of "click" on mobile devices.

When the user clicks on the search label inside the header element, we toggle the visibility of the full screen search container by toggling the CSS class "opensearch" on it. If the current action is to close the search container- by checking that the class "opensearch" is missing from the container - we blur the search INPUT field while suppressing the default label action of setting focus on the element from kicking in. The act of setting focus and blurring on a form field has the added advantage of automatically bringing up and dismissing the virtual keyboard on most mobile browsers.

To dismiss the search container when the user clicks anywhere on the document other than on the label or the search field itself, we attach a "click/ touchstart" event to the document element that accomplishes this. Calling e.stopPropagation() inside the search label and field prevents the same action inside these elements from reaching the document.

And finally, our JavaScript makes use of the classList API to handle CSS classes, which is not supported in IE9 or lower. There's a good classList pollyfill if you need legacy browsers support.

Partners