Learn and share. The simplest harmony.

 

Creating “Next Level” Search Form Using jQuery & CSS3

Posted on February 7, 2012 and got 34 shouts so far

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.

Simple Style

First to go we will create a simple animated search form that show only search button with search image on it. When the button receives a click, the input field will widen while the search image will move to left filling the left blank space before input text.



Based on the picture above, the HTML element will consists of 4 elements, a div for elements wrapper, an input text, an input button for search button and an image search. All of them will be stacked each other where the div wrapper is at the very bottom of the stack and image search at the very top. Here’s the HTML and CSS :

.wrapper-simple {
	text-align: center;
	margin: 0 auto;
	display: block;
	width: 60px;
	height: 45px;
	padding: 10px 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,
					#9bb6c9 0 1px 2px;
	position: relative;
}

.wrapper-simple input[type=submit] {
	margin-top: .2em;
	z-index: 2;
	position: relative;
	vertical-align: top;
	height: 43px;
	min-width: 55px;
	border-radius: 3px;
	border: 1px solid #aa7818;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
	box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;
	cursor: pointer;
}

	.wrapper-simple input[type=submit]:active {
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}
	
	.wrapper-simple input[type=submit]:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

.wrapper-simple input[type=text] {
	font-family: Arial;
	font-weight: bold;
	color: #1a3d51;
	background: #d8e6ef;
	border-radius:2px;
	padding: 10px 10px 15px 10px;
	width: 250px;
	border: 0;
	font-size: 16px;
	text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
	box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	position: absolute;
	width: 1px;
	z-index: 2;
	padding-left: 2em;
	margin-left: .2em;
}

.wrapper-simple img {
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 4;
}

Now we will read the click event on search button and animate the form using jQuery.

$('.wrapper-simple input[type=submit]').toggle(function(){
	
	$('.wrapper-simple').animate({'width':'300px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})
	  .end().find(this).animate({'marginLeft':'22em'}).attr('value', 'CANCEL');
	
}, function() {
	
	$('.wrapper-simple').animate({'width':'60px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '0'})
	  .end().find(this).animate({'marginLeft':'0'}).attr('value', '');
	
});

The script toggling user’s click. First click will widen the div wrapper and input text, move the search button to the edge of input text and move image search to fill the left blank space before input text. Second click will revert to normal.

Cube Style

After making simple animated search form, actually we aren’t moving too far. So we will make another experiment, how about show the search form rotating like a cube? Well, CSS3 properties like transform, perspective and animation seems very helpful. The thing that we must give more attention that the following code and demo currently work only on Safari 5+ and Firefox 11.0 (Mac).



Making a cube is a bit tricky, for vertical rotate and one direction (up to down) we can create a cube by making 2 div, first div as a front side of the cube and the second div as a top side. The top side div must be rotated so it will be like coming from the top when the cube rotating.



The structure of elements will be :

wrapper1 acting as wrapper for all elements inside, content-wrapper1 also as a wrapper that will be rotated, search button-1 as top side and search-box1 as front side. The styling :

.wrapper1 {
	display: block;
	width: 300px;
	margin: 0 auto;
	-webkit-perspective : 1200px;
}

	.search-button1 span {
		display: block;
		margin: 0 auto;
		background: #643904;
		border-radius: 30px;
		width: 30px;
		height: 30px;
		box-shadow: rgba(255,255,255,.3) 0 1px 0px;
	}
	
		.search-button1 span img {
			vertical-align: middle;
			padding-top: 7px;
		}

	.search-button1:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

	.search-button1:active {
		margin-top: 0.2em;
		box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, 
						#8e620e 0 0.3em 0, 
						rgba(0, 0, 0, 0.2) 0 0.5em 3px;	
	}
	
.search-box1 {
	margin-top: -.6em;
	display: none;
	position: absolute;
	width: 300px;
	height: 50px;
	padding: 10px 6px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border: 1px solid #9bb6c9;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, 
					#899faf 0 .5em 0px, 
					rgba(0, 0, 0, 0.2) 0 .9em 3px;


	-webkit-transform:	rotate3d(1,0,0,90deg) 
								translateZ(20px);
}

	.search-box1 input {
		font-family: Arial;
		font-weight: bold;
		color: #1a3d51;
		background: #d8e6ef;
		border-radius:2px;
		padding: 10px 10px 15px 10px;
		width: 250px;
		border: 0;
		font-size: 16px;
		text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}
		
		.search-box1 input:focus {
			outline: none;
		}
	
	.search-box1 img {
		opacity: .5;
		position: absolute;
		margin: .6em 0 0 -2em;
		cursor: pointer;
		-webkit-transition: 0.5s linear;
	}
	
		.search-box1 img:hover {
			opacity: 1;
		}

.hide-search-button {
	display: none;
}

.show-search-button {
	display: block;
}

.show-search-box {
	display: block;
}

.showed-search-box {
	display: block;
	-webkit-transform: rotate3d(1,0,0,0deg);
}

.hidden-search-box {
	-webkit-transform:	rotate3d(1,0,0,90deg) 
								translateZ(25px);
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}
		
@-webkit-keyframes showBox{
	0% { -webkit-transform: rotate3d(1,0,0,0); }
	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}

		
@-webkit-keyframes hideBox{
	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
	100% { -webkit-transform: rotate3d(1,0,0,0); }
}

We’re a half set up, now we will read the click event from the user and rotate the cube.

$('.search-button1').click(function() {
	
	$('.content-wrapper1').addClass('switch-show');
	$('.search-box1').addClass('show-search-box');
		
	setTimeout(function(){
			
		$('.content-wrapper1').removeClass('switch-show');
		$('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
		$('.search-box1').addClass('showed-search-box');
		
	},480);
});

$('.search-box1 img').click(function() {
	
	$('.search-button1').removeClass('hide-search-button');
	$('.search-box1').addClass('hidden-search-box');
	$('.content-wrapper1').addClass('switch-hide');
	
		
	setTimeout(function(){

		$('.content-wrapper1').removeClass('switch-hide');
		$('.search-button1').removeClass('show-search-button');
		$('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');
		
	},480);
		
});

The script above act as an animation delegator, all animation handled by CSS. Since the CSS animation we describe before only works once and revert to the normal state, we force the current showed side to visible and other side to hidden until the animation works before revert back, this is do the trick.

Cube Style With Animate

At some point we might animate the front side before rotate the cube. Then we reduce the front side’s width and widen it before rotate.



$('.search-button2').click(function() {
	
	$('.arrow').hide();
	
	$(this).stop().animate({'width':'300px'}, 500, function() {
		
		$('.content-wrapper2').addClass('switch-show');
		$('.search-box2').addClass('show-search-box');
		
		setTimeout(function(){

			$('.content-wrapper2').removeClass('switch-show');
			$('.search-button2').removeClass('show-search-button').addClass('hide-search-button');
			$('.search-box2').addClass('showed-search-box');
		
		},480);
		
	});
});

$('.search-box2 img').click(function() {
	
	
	$('.search-button2').removeClass('hide-search-button');
	$('.search-box2').addClass('hidden-search-box');
	$('.content-wrapper2').addClass('switch-hide');
	
	$('.search-button2').addClass('show-search-button').stop().delay(500).animate({'width':'50px'}, 500, function() {
		
		$('.content-wrapper2').removeClass('switch-hide');
		$('.search-button2').removeClass('show-search-button');
		$('.search-box2').removeClass('show-search-box showed-search-box hidden-search-box');
		
		$('.arrow').show();
		
	});
});

We use jQuery’s animate() function to widen the front side’s width and reduce it back when user close the form.

Conclusion

CSS3 and jQuery combination help us improve current web user interface into unlimited state, depend on our imagination. Did I missed something? I’d love to hear.

 

This Post Tags :

Bookmark Post :

Pin It
  • Oh man, these are awesome. Great job, so creative.

  • keren, awesome, luar biasa :D

  • Awesome article! Just like every other article on this site :3

  • paraahh … its so awesome bro :D

  • Nice article, only the styling fails in Opera 11.51 and maybe more versions…

  • Make it crossbrowser with -moz and other prefixes.

  • Great post.
    A little improvement would be to use the HTML5 attribute “placeholder” to create the input watermark effect. Since you are already using jQuery, you can provide support for browsers that don’t recognise this attribute.

  • Looks really cool… on mobile (and even desktop) I’d argue that it would be better if once clicked (e.g. you know the user was intending to search) that you put focus in the field… this also triggers the keyboard on mobile/tablet devices.

    This is actually kind of key… because on those devices… an attempt to click the “X” to dismiss it won’t work because it is actually the “first” focus on the input… which causes it to gain focus, and open the keyboard.

    Other than that, very slick – well done!

  • Did I missed something? Yes, you did! The demo supports only webkit. Shame on you!

  • The look and the feeling of clicking them is really nice!
    On the other hand I would argue that they are not the “next level” for search forms from the perspective of an Interaction Designer.
    What happens here is that the action that I want to carry out when clicking the search form is being delayed by the animations. I expect to click the search form and type my search query instantly.

  • oh that’s nifty one… it’s going to be fun to mash that one up.

  • You should add ‘pointer-events: none’ to the hourglass image. At least in Chrome Canary I have to click around the image to get it to trigger the search bar.

  • It would be better if you actually create placeholder for text instead of value and clear that value if you hide and then show that again.

  • Nice, but too bad it’s not more compatible.

  • ok for an experiment, but here some questions for usability:

    - why extra clicks for opening the search field?
    - how to layout this stupid button, which needs space anyway for functioning after all?
    - user questions: “what will i search if i click the search button? will i leave the page? where to enter my search term? ”

    - why safari/webkit only?

  • @All thanks for your comments!

    Prefix and placeholder added, thanks to @George, @Mechanism, @Tim James, @Benjamin Charity and @Jcubic.

    @Steve
    Really sharp! But I left it on updated code to make HTML5 placeholder visible.

  • This is truly an innovative way to implement jQuery and CSS3. Thanks for this awesome post.

  • Works on my stable version of chrome that you get from the chrome downloads!

  • This really is very nice, I love this kind of thing. Have you managed to test it with users though? Are they confused or do they expect the button to take them somewhere like a link to a search. My only worries would be context of the search and the question in the mind of the user where do I input this?

  • Nice! Couple things, current paradigm of the X in a search box is to clear the text not “close” the search button.

    Maybe the cube 3d effect would be stronger if you kept the bottom face orange colored when the search box is open?

  • Works on Google Chrome Dev (19.0.1041.0 dev-m)

    Thanks!

  • Looks nice! But usability and interface considerations suffer greatly. The user has no idea what happens if he clicks this. Is he taken to a new page? Will there be a pop up with search field? Unfortunately, such tricks looks cute but doesn’t really work in reality – it will frustrate the user as he has no idea how this control works – and might have tough times deciding if to click it at all.

  • Truly awesome! Usability wise i am not sure it’s the best use of these animations, but the result is really nice and clean. Thnaks

  • We can do rotation also, it looks great!!

  • Love the cube style, doesn’t work on IE at all. I think there might be a way to fallback to IE

  • Amazing stuff! I love new css3 properties!

  • Good job ! Thanks for sharing.
    <3

  • This is a great example of what jQuery and CSS3 can do, but not very practical from a UX perspective. As an end-user, I don’t want to waste my time on animations or transitions just to perform such a mundane task as a search query.

  • Can you make it work on IE?

  • Wooww.. amazing search form..

  • Amazing indeed. But my client was not satisfied, since it is not working in IE. I had to change to another, more simpler and ugly stuff :(

  • GG gan

  • Great seems. Very useful form example. Thanks.

  • It is brillant! :)