Sharepoint Server

Now, we learn how to customize the sharepoint search box

Sharepoint default search box

Customized search box

Search for the Content place holder PlaceHolderSearchArea

Add the property visible=”false” to the PlaceHolderSearchArea

As shown in below image:

Hiding the PlaceHolderSearchArea

Now, choose the place where you want to put the customized search box or write a new tag <td></td> below the PlaceHolderSearchArea closing </td> tag

Go to the menu Task Panes > Web parts (Select the Web parts, if is not already selected)

Select the Search Box web part form he Web part List, Click on Insert Selected Web part (which inserts the web part in to the area you have choosen)

Now, add the tag <DropDownModeEx xmlns=”urn:schemas-microsoft-com:SearchBoxEx”>HideScopeDD</DropDownModeEx> into the newly added Search Box web part

As shown in the below image:

Customized search box tag

Add one more tag in to the search box code, to display the default value (Enter keyword…) while the search box is empty<QueryPromptString xmlns=”urn:schemas-microsoft-com:SearchBoxEx”><b>Enter Keyword…</b></QueryPromptString>

As shown in the below image:

Customized search box tag

Output: Customized search box