This is a technique I’ve already used for SharePoint 2010. In this article I will update it using the SharePoint 2013 HTML structure.

This is the standard search box in SharePoint 2013:

And this is what we want to achieve:

How it works

We will set a background image to the parent div container of the search controls. This background image will contain all the design we need for the control. In the example above, except for the text “Search this site”, it is all a background image that you see.

After setting the background image we need to set the size and spacing of the input box and the search button to match the background position.

Then we will hide these controls, removing all the borders, backgrounds, images, etc.

The code

#searchInputBox {
 background: url('/_catalogs/masterpage/images/bg_search.png') no-repeat scroll 0 0;
 height: 24px; /*exact same height as image */
 width: 225px; /*exact same width as image */
}

#SearchBox > div {
 border: 0;
}

#SearchBox > div > input {
    border: 0 none;
    font-size: 11px;
    /* adjust size and positioning of input box */
    height: 22px; 
    margin: 0 19px 0 0;
    padding: 2px 0 0 30px;
    width: 110px; 
}

/* hide dropdown list button */
#SearchBox .ms-srch-sb > .ms-srch-sb-navLink {
 display: none;
}

#SearchBox .ms-srch-sb > .ms-srch-sb-searchLink {
    border: 0 none;
    height: 24px;
    margin-left: 0;
    width: 62px;
}

/* reset hover bg color */
#SearchBox .ms-srch-sb-searchLink:hover,
#SearchBox .ms-srch-sb-navLink:hover {
 background-color: transparent;
}

/* hide search button image (magnifier) */
#SearchBox .ms-srch-sb > .ms-srch-sb-searchLink img {
 display: none;
}