在sharepoint 2010中设置搜索栏样式

Posted 2021-02-25

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.

<!--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>