<!--in master page , replace -->


<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>

<!--with -->

<div class="s4-notdlg" id="searchBoxOuter">
		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>
	</div>

<!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->

<style type="text/css">
#searchBoxOuter {width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/}
/*#searchBoxOuter:hover { background: url('images/bg-search.png') 0 -30px no-repeat;}*/
.s4-search INPUT.ms-sbplain {background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important;  font-style:italic;}
 .s4-search .srch-gosearchimg {	background-color:transparent; background-image:none; visibility:hidden;}
 input.s4-searchbox-QueryPrompt {font-size:13px !important; }



</style>

<!--in master page , replace -->


<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>

<!--with -->

<div class="s4-notdlg" id="searchBoxOuter">
		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>
	</div>

<!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->

<style type="text/css">
#searchBoxOuter {
	width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/
}

/*#searchBoxOuter:hover {
	 background: url('images/bg-search.png') 0 -30px no-repeat; 
}*/

.s4-search INPUT.ms-sbplain {
	background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important;  font-style:italic;
}

.s4-search .srch-gosearchimg {
/	background-color:transparent; background-image:none; visibility:hidden;
}

 input.s4-searchbox-QueryPrompt {
	font-size:13px !important; 
}


</style>

<!--in master page , replace -->


<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>

<!--width -->

<div class="s4-notdlg" id="searchBoxOuter">
		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>
	</div>

<!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->

<style type="text/css">
#searchBoxOuter {
	width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/
}

/*#searchBoxOuter:hover {
	 background: url('images/bg-search.png') 0 -30px no-repeat; 
}*/

.s4-search INPUT.ms-sbplain {
	background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important;  font-style:italic;
}

.s4-search .srch-gosearchimg {
/	background-color:transparent; background-image:none; visibility:hidden;
}

 input.s4-searchbox-QueryPrompt {
	font-size:13px !important; 
}


</style>

This is the quickest way to style the search bar. It involves creating one single image that includes both the input area and search button.

style the search bar in sharepoint 2010

css, search, style, sharepoint

CSS