Unable to replace the default search icon using CSS in Sharepoint 2013

Question

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.

Robert Lindgren · Accepted Answer · 2015-01-06 13:32:15Z

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

This is for 2010, while the question specifically mentions 2013 — Robert Lindgren
– Robert Lindgren, Commented Jan 6, 2015 at 13:36

Robert Lindgren · Accepted Answer · 2015-01-06 13:36:05Z

0

Following options cans be used:

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

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.
Use a delegate control to replace the entire searchbox
- You will need server access for this. Delegate control to customize small search box

edited Jan 6, 2015 at 13:36

Robert Lindgren

24.5k12 gold badges55 silver badges79 bronze badges

answered Jan 6, 2015 at 12:33

404

2,2254 gold badges17 silver badges39 bronze badges

you sure that td.ms is SP 2013 SP class or 2010's?

noah_dvlpr
– noah_dvlpr

2015-01-06 13:03:01 +00:00
Commented Jan 6, 2015 at 13:03

Add a comment |

Stack Exchange Network

Unable to replace the default search icon using CSS in Sharepoint 2013

2 Answers 2

Your Answer

Hot Network Questions

Unable to replace the default search icon using CSS in Sharepoint 2013

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions