custom CSS search Box in blogger blogspot

Open a NEW Javascript box and put the following code:

<style type="text/css"> #hbz-searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUjQGpeUJ47UA3CzhvNlW2PPANRU51nufKeOn15dwgNXAtD9qUef2US-BkWEl10DLQc4zdVFtZNl4Ec6q_nF-mT_BM9XqOxgiEF-B2c3_uRablBmhLjI5Jx0swxwFGH1hx4Q25vd2y6qF/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px
}

input:focus::-webkit-input-placeholder {
    color: transparent
}

input:focus:-moz-placeholder {
    color: transparent
}

input:focus::-moz-placeholder {
    color: transparent
}

#hbz-searchbox input {
    outline: none
}

#hbz-searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0 0 20px;
    padding: 5px 0;
    border-width: 0;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZB9CHE4_8y7UWE3SHNQLJrEMhtUv6M0K37nIiTTWI23wk5xYHgAYlhu_Yf3f00QZX7hJTWzkoyInOdqTRJKwahyphenhyphenBBtPSFdbZUQEpgiUTtgyVPSsB3P-y-Fd4kroxF4LTPSkHocEO4eO3u/s1600/magnifier.png) no-repeat;
    border-width: 0;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqEu2tj53CFnrO2gzGgxbfYmDcRNKJW5RdFRwXGzoRLKQQnJpzqfPnk_SwzxpN2loAYXbkP7uLMI42cD4-f-NGZs2RZ29eR1D_ii3MaIN9QBqyvvx1GHifCDQq4vE7euGA7YjR4gEOaLE/s1600/magnifier-hover.png) no-repeat
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqEu2tj53CFnrO2gzGgxbfYmDcRNKJW5RdFRwXGzoRLKQQnJpzqfPnk_SwzxpN2loAYXbkP7uLMI42cD4-f-NGZs2RZ29eR1D_ii3MaIN9QBqyvvx1GHifCDQq4vE7euGA7YjR4gEOaLE/s1600/magnifier-hover.png) no-repeat;
    outline: none
}

#button-submit::-moz-focus-inner {
    border: 0
}

</style> 

<form id="hbz-searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

REPLACING the red lines url you can customize the search box style

BONUS CODE

To put this fox Upper of your blog as fixe TOP RIGHT seach bar: 

put this code in youe Template Template/Advance/Add CSS >>>

#hbz-searchbox { position: fixed; top: 0px; right: 0px; z-index: 999; width:100%