Question: I would like to change the image next to the search box to a styled input button.

Do I need to create a new delegate control to do this? Can I do this with css, if so how?

This is the standard search UI  

![enter image description here](https://i.stack.imgur.com/bRp3m.jpg)

This is the desired css button look  

![enter image description here](https://i.stack.imgur.com/t59MW.jpg)

Answer: 
The image is rendered using an tag which you cannot modify using just CSS. You could either

* A - 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.
* B - Use a delegate control to replace the entire searchbox

My vote usually goes for option B since I don't like messing with a non-standardized HTML layout that jQuery uses. E.g. if a service pack is installed which changes the default searchbox then it'll blow your jquery out of the water. For option B you do need to have server access. For option A you do not since you can include jQuery using a content editor part or in the masterpage using SharePoint Designer.
You can simple modify these CSS class and IDs to bring changes to your SharePoint 2013 Search Textbox.

you can modify it according to your needs:![enter image description here](https://i.stack.imgur.com/XOaRw.png)

```
/*######################--Sharepoint 2013 Search Box--############################*/

#searchInputBox {
 background: url('/_catalogs/masterpage/CSS/bg_search.png') no-repeat scroll 0 0;
 background:#FFFFFF;
 height: 27px; /*exact same height as image */
 width: 325px; /*exact same width as image */
 border-radius:7px;
 margin-top:1%;
 margin-right:70%;
}

#SearchBox > div {
 border: 0;
 border:thin #EEEEEE solid;
 border-radius:7px;
 background:#EDF5F9;
}

#SearchBox > div > input {
  border: 0 none;
  font-weight:bold;
  /* adjust size and positioning of input box */
  height: 23px; 

  padding: 2px 0 0 30px;
  width: 220px; 
  background:#EDF5F9;

 }

/* hide or show dropdown list button */
#SearchBox .ms-srch-sb {
  display: block;
 }
#SearchBox .ms-srch-sb-navLink{
   margin-right:10px;
}
/*
#SearchBox .ms-srch-sb-searchLink{
 float:right;

}
*/

/*
  #SearchBox .ms-srch-sb > .ms-srch-sb-searchLink {
  border: 0 none;
  height: 34px;
  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;
 }
 */
 /*##################---End of Search box---##########################*/

```