Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I would like to change the image next to the search box to a styled input button.

Do I need to create a new delegate control to do this? Can I do this with css, if so how?

This is the standard search UI
enter image description here

This is the desired css button look
enter image description here

share|improve this question
    
Hello, Could you show a picture of what you want to change please ? I don't see exactly –  BenHouse Apr 20 '11 at 6:52

6 Answers 6

up vote 8 down vote accepted

The image is rendered using an tag which you cannot modify using just CSS. You could either

  • A - Use some jQuery to modify the HTML for the searchbox. You can target the srch-gosearchimg CSS class to modify the image tag and point it to another source image.
  • B - Use a delegate control to replace the entire searchbox

My vote usually goes for option B since I don't like messing with a non-standardized HTML layout that jQuery uses. E.g. if a service pack is installed which changes the default searchbox then it'll blow your jquery out of the water. For option B you do need to have server access. For option A you do not since you can include jQuery using a content editor part or in the masterpage using SharePoint Designer.

share|improve this answer

You can either replace the DelegateControl (if you have farm access)

http://msdn.microsoft.com/en-us/library/ms463169.aspx

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

Or you can override the PlaceHolderSearchArea in your page layouts (if you can only have site access)

share|improve this answer
    
You just need to replace the delegate control in the master page. If you roll with your own master page through a sandboxed solution, then u do not need a farm level access. –  Roman Mar 2 '12 at 1:23
/*Search Box Styles*/
.s4-search input.ms-sbplain{margin-top:5px!important; background:url(../images/search_left.png) no-repeat; border:0 none !important; height:16px; padding:4px 2px 2px 9px; color:#666; font-size:.85em; font-style:normal;}
.s4-search .ms-sbgo{padding-top:5px;}
.s4-search .ms-sbgo a{margin-top:5px; background:url(../images/search_btn.png) no-repeat; width:27px; height:22px; display:block; }
.s4-search .srch-gosearchimg, .s4-search .ms-sbgo span{display:none; }
.adminBar .ms-sbrow a, .ms-sbcell{margin:0; padding:0;}
share|improve this answer

I don't think this quite answered the original question. The author asked how to change the OOB image and script click event, with a styled INPUT TYPE=BUTTON.

The options/suggestions given relied on simply changing the image and not the actual markup rendered by the SearchBoxEx control (which is the underlying SP server control rendered by the SmallSearchInputBox delegate control).

Ideally, you would want to completely remove the delegate control from the PlaceHolderSearchArea, and just include simple HTML markup for the INPUT text and INPUT button with the appropriate CSS classes. But if you did this, you would need to also provide the behavior for the button click/post.

You can just wrap these input elements with a form tag (NOT runat server), and set the action URL to the path of the search results page, and make sure that the name of the text box control is the name of the querystring parameter expected by the search results page.

WARNING: by doing this you will lose the builtin functionality that the SearchBoxEX control gets of "understanding" the configured search settings at the site collection (e.g. the search results page location, scopes, etc).

For public Internet site, this may not be as crucial since you want lean, controlled markup, and you likely already created a custom search results page, instead of the OOB experience, so you know the URL path users are taken for search results.

For Intranet/Portal sites, this might not be the desired approach since you might want the richer Search experience with the search controls being connected to SP search know-how. In this case, you might look into writing code to extend the SearchBoxEx control and override the OnRender event of the control to provide your own HTML while still leveraging the server-side properties and search functionality from SharePoint. Then you can deploy this as a feature that injects your custom control in the SmallSearchInputBox delegate, with a higher precedence number to replace the OOB SearchBoxEx.

HTH

share|improve this answer

Just throwing this into the discussion... Erik Swenson did 2 great blog posts regarding how to change the way the OOTB search box looks like: http://erikswenson.blogspot.com/2011/02/sharepoint-2010-large-search-box-scopes.html and http://erikswenson.blogspot.com/2011/02/sharepoint-2010-large-search-box.html Seems to me that reusing the default control and changing the default image/ icon via css would be the easiest solution? Greg

share|improve this answer

You can simple modify these CSS class and IDs to bring changes to your SharePoint 2013 Search Textbox.

you can modify it according to your needs:enter image description here

/*######################--Sharepoint 2013 Search Box--############################*/

#searchInputBox {
 background: url('/_catalogs/masterpage/CSS/bg_search.png') no-repeat scroll 0 0;
 background:#FFFFFF;
 height: 27px; /*exact same height as image */
 width: 325px; /*exact same width as image */
 border-radius:7px;
 margin-top:1%;
 margin-right:70%;
}

#SearchBox > div {
 border: 0;
 border:thin #EEEEEE solid;
 border-radius:7px;
 background:#EDF5F9;
}

#SearchBox > div > input {
  border: 0 none;
  font-weight:bold;
  /* adjust size and positioning of input box */
  height: 23px; 

  padding: 2px 0 0 30px;
  width: 220px; 
  background:#EDF5F9;

 }

/* hide or show dropdown list button */
#SearchBox .ms-srch-sb {
  display: block;
 }
#SearchBox .ms-srch-sb-navLink{
   margin-right:10px;
}
/*
#SearchBox .ms-srch-sb-searchLink{
 float:right;

}
*/


/*
  #SearchBox .ms-srch-sb > .ms-srch-sb-searchLink {
  border: 0 none;
  height: 34px;
  margin-left: 0;
  width: 62px;
 }
*/


/* reset hover bg color */
#SearchBox .ms-srch-sb-searchLink:hover,
#SearchBox .ms-srch-sb-navLink:hover {
background-color: transparent;
}

 /* hide search button image (magnifier) */
/*
 #SearchBox .ms-srch-sb > .ms-srch-sb-searchLink img {
   display: none;
 }
 */
 /*##################---End of Search box---##########################*/
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.