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: 
```
/*Search Box Styles*/
.s4-search input.ms-sbplain{margin-top:5px!important; background:url(../images/search_left.png) no-repeat; border:0 none !important; height:16px; padding:4px 2px 2px 9px; color:#666; font-size:.85em; font-style:normal;}
.s4-search .ms-sbgo{padding-top:5px;}
.s4-search .ms-sbgo a{margin-top:5px; background:url(../images/search_btn.png) no-repeat; width:27px; height:22px; display:block; }
.s4-search .srch-gosearchimg, .s4-search .ms-sbgo span{display:none; }
.adminBar .ms-sbrow a, .ms-sbcell{margin:0; padding:0;}

```
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---##########################*/

```