Tag: CSS

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

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.

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;

td.ms-sbgo a img
    display: none;