Thursday, January 27, 2011

Changing the Search Icon to a custom images in SharePoint 2010 search bar

How to change the original magnify glass icon in the search bar like the the image below to a custom image:


The Fix:
Add the following below to the to your CSS:

/*this hide the original magnify glass image*/ 
.ms-sbgo img{
display:none;   
}



/*this adds the new custom image */ 
.ms-sbgo a {
    background: url("/_layouts/images/customfolder/btn-search.jpg") no-repeat;
    width:70px;
    height:21px;
    display:block;
}

The Result:

No comments:

Post a Comment