Add Twenty Eleven Search form to Your themes

From ThaiiS Note (Wiki)

Contents 1 We’ll add the call for the searchform below this line. 2 Next create a file called searchform.php and add this to it 3 if view with css 3.1 Add this to your style.css. 3.2 download search icon

We’ll add the call for the searchform below this line.

<div id="branding"><div class="only-search"><?php get_search_form(); ?></div></div>

Next create a file called searchform.php and add this to it

<?php
/**
 * 2011 Searchform
 */
?>
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" class="field" name="s" id="s"  placeholder="<?php _e('Search') ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php _e('Search'); ?>" />
</form>

Save searchform.php to your theme dirctory.

if view with css

on silk web include searchform.php in to themplate file

<div id="branding"><div class="only-search">	<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" class="field" name="s" id="s"  placeholder="<?php _e('Search') ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php _e('Search'); ?>" />
</form></div></div>

Add this to your style.css.

/*  Searchform
-------------------------------------------------------------------------------*/
#branding #searchform {
	text-align:right;
	position: relative;
	top: 0px;
	right: 0px;
}
#branding #searchform div { margin: 0; }
#branding #s {
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	float: right;
	font-size: 12px;
	height: 14px;
	margin-top: -30px;
	width: 150px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 28px;
	background-image: url(images/search.png);
	background-repeat: no-repeat;
	background-position: 3px 1px;
}
#branding #s:focus {
	background-color: #f9f9f9;
	width: 250px;
}
#branding #searchsubmit { display: none; }
#branding .only-search #searchform {
z-index: 1;
}
#branding .only-search #s {
	background-color: #eee;
	border-color: #ddd;
	color: #888;
}
#branding .only-search #s:focus {
	background-color: #ddd;
}
/* End Searchform
* --------------------------------------------------------------------------- */

download search icon

and place it in /your-theme/images folder