0

I tried to replace the default search icon in the search box by using the following code

.ms-InlineSearch-DivBaseline .ms-InlineSearch-Outline-Baseline .ms-inlineSearch-searchImgSpanBase > img{ background-image:url('Icons/custom-icon.png') !important ; background-repeat:no-repeat; display:block; }

Image tag has an inline styling with src="location of default image",and it is not allowing to override the CSS even with !important specified. How can we change the default icon with our custom icon. Note: Targeting the img tag is correct as I applied display:none,it did hid the default image.

1

This link should help you [here](http://erikswenson.blogspot.in/2010/01/change-sharepoint-search-icon-with-just.html, below is extract from same post what you need to follow is:

Upload your custom images to a sub folder within the following directory: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\IMAGES\YourCustomFolder

Then in your custom CSS simply place the following CSS:

td.ms-sbgo{ 
    background-color:transparent; 
    padding-left:3px; 
    padding-right:3px; 
    padding-bottom:0px; 
    padding-top:0px; 
    border:solid 0px #949494; 
} 

td.ms-sbgo a{ 
    padding: 0px 0px 0px 0px !important; 
    margin: 0px 0px 0px 0px !important; 
}

td.ms-sbgo a{ 
    background-image: url(/_layouts/images/yourcustomfolder/custom_search.gif); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

td.ms-sbgo a img{ 
    visibility: hidden; 
    height: 17px; 
    width: 17px; 
}
1
  • This is for 2010, while the question specifically mentions 2013 – Robert Lindgren Jan 6 '15 at 13:36
0

Following options cans be used:

  1. CSS

    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;
    }
    
  2. 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.

  3. Use a delegate control to replace the entire searchbox

1
  • you sure that td.ms is SP 2013 SP class or 2010's? – noah_dvlpr Jan 6 '15 at 13:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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