Changing SharePoint 2010 search box icon using CSS

There are a few ways to change the search box icon like specifying image URL by creating or using existing delegate control and another way to change it on runtime using JavaScript but there is another simpler way so let’s explore it and look at the html for icon which is being generated by the SmallSearchInputBox html control

<a href="javascript:S3031AEBB_Submit()" title="Search" id="ctl00_PlaceHolderSearchArea_ctl01_S3031AEBB_go">
<img style="border-width:0px;" src="/_layouts/images/gosearch15.png" alt="Search" class="srch-gosearchimg" onmouseout="this.src='\u002f_layouts\u002fimages\u002fgosearch15.png'" onmouseover="this.src='\u002f_layouts\u002fimages\u002fgosearchhover15.png'" title="Search">
</a>

We can see that there is an inline img tag inside an anchor tag so if we set the img tag display’s to none and specify background image for the anchor we can easily change icon so let’s try this out. To apply the following CSS, we’ll have to create a CSS in Style Library in which we’ll override default styling and specify it as an alternate CSS in Master page site settings.

td.ms-sbgo
{
padding:0px 3px 0px 3px;
}

td.ms-sbgo a
{
    background-image: url(/Style%20Library/Images/our_search_button.png);
    background-repeat: no-repeat;
    background-position: top left;
    display:block;
    width:20px;
    height:19px;
}

td.ms-sbgo a img
{
    display: none;
}
About these ads

About Khurram Punjwani

Khurram Punjwani is a passionate .NET / SharePoint Consultant who specializes in delivering extensible solutions using agile methodologies. View all posts by Khurram Punjwani

One response to “Changing SharePoint 2010 search box icon using CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 139 other followers

%d bloggers like this: