Search bar CSS transforms and associated JS/jQuery for jboatworks.com search field. See http://jboatworks.com for it in action. Click/tap in the search field, enter a search query, and/or click/tap outside the field to see the transform.

johanson-searchbar.css

/********************
SEARCH BAR
********************/
div#searchBar {
  right: 411px;
	position: absolute;
	background-color: transparent;
	top: 21px;
	height: 22px;
	border: 1px solid transparent;
	border-radius: 25px;
	font-weight:700;
}
div#searchBar.hovered {
	background-color: white;
	border-radius: 25px;
	border: 1px solid #505050;
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.25);
}
div#searchBar.focused {
	right: 411px;
	width: 180px;
	position: absolute;
	background-color: white;
	border-radius: 25px;
	top: 21px;
	border: 1px solid #505050;
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.25);
/*
-moz-transition: all 0.25s ease;  
    -o-transition: all 0.25s ease;  
    -webkit-transition: all 0.25s ease;  
    transition: all 0.25s ease;  
*/
}
div#searchBar form fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
div#searchBar form input {
}
div#searchBar form input#searchField {
	width: 46px;
	height: 22px;
	line-height: 22px;
	font-weight:700;
	color: #34373A;
	background-color: transparent;
	font-size: 0.75em;
	border: none;
	float: left;
	margin: 0px;
	padding: 0px 2px;
        cursor: pointer;
}
/*div#searchBar:hover form input#searchField,*/
div#searchBar.focused form input#searchField {
	width: 145px;
/*
-moz-transition: all 0.25s ease;  
    -o-transition: all 0.25s ease;  
    -webkit-transition: all 0.25s ease;  
    transition: all 0.25s ease-out;  
*/
}
div#searchBar form input#searchButton {
	float: left;
	width: 16px;
	height: 16px;
	margin: 3px 0px 0px 6px;
	padding: 0;
	background-image: url('/theme/jboatworks/img/template/search-icon.png')
}

johanson-searchbar.js

  // search field hover
	$("#searchField")
	.hover(function() {
			$("#searchBar").toggleClass('hovered', 250); // make white to show allowance for input
	}, 
        function() {
			$("#searchBar").toggleClass('hovered', 250); // revert
	});

	// prevent blank search. instead, toggle search bar if empty/default value
	$("#searchBar form").submit(function(e){
		var searchFieldInput = $("#searchField").val();
		if(jQuery.trim(searchFieldInput).length == 0 || searchFieldInput == "Search") { // the search field is blank, has whitespace, or "Search"
			e.preventDefault(); // don't search for nothing
			$("#searchBar").toggleClass('focused', 250); // open searchbar for input
		} else { // there is actual content in the search field
			return true; // search on the value in the field
		}
	});
		
	// search bar prettification
	$('#searchBar').focusin(function() { $(this).addClass('focused', 250) });
	$('#searchBar').focusout(function() { $(this).removeClass('focused', 250) });