6 Answers
6

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.

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.