SPSearchBox.css

/* 
    Created on : Jan 12, 2017, 9:30:13 AM
    Author     : DAVID MUTUA
*/

/** Transparent Bg **/
#SearchBox .ms-srch-sb-border{
    background: rgba(0, 51, 127, 0.3); 
    margin-top: 3%;
    border: none;
}

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


/** Search Button **/
#SearchBox .ms-srch-sb > .ms-srch-sb-searchLink {
    display: block;
    width: 30px;
    height: 32px;
    border: 0px;
    float: left;
    padding: 4px 0 0 0;
    background-color: #FFCF01;
    background-image: url('../images/search_tn_32x32.png');
    background-position: 0 0;
    background-repeat: no-repeat;

    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    margin: 0;

}

a {
    text-decoration: none;
    color: #c5093b;
}


/** Input Field **/
#SearchBox > div > input {
    background-color: #FFF;
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    border: 0 none;
    display: block;
    float: left;
    width: 180px;

    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

/** Fix Help and Full-Screen Icons on SharePoint Custom Branding **/
#suiteBar *, #s4-ribbonrow * 
{
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing:content-box;
}

/* Remove Left Quick Launch Navigation SharePoint */
<style type="text/css">
 #sideNavBox {DISPLAY: none}
 #contentBox {MARGIN-LEFT: 20px}
</style>


/** 

Using The SharePoint SearchBox in a Script Editor WebPart:
    1.) Remove the Original Page SearchBox using JavaScript.
    2.) Insert it into your custom tag which has an ID using JavaScript.
    3.) Style the SearchBox using the Stylesheet Above.

**/