custom CSS search Box in blogger

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/AVvXsEj9U77-8Oef-VZ-p-RDOyr3psZ-q7TAi_OAnWSE16ogHpwPa2psG590hb849bZcsYbOXRbkBXx8B_l70VLcE1v6HB3FcrH403QukEXohBK3ifF714cmIb1eQWeqzD5u4VMrvirNEfKS5Ktx/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/AVvXsEhTumLTScW5j-eDpc01G2WgQ9jQI17Wv2pdVKItzdDTz6ubdgBXfKXk563Ka_TsuzDvoZNgMlREYX-F5yDlSyLxOLzuGjWGkENeCaN82mHo-23z_JDWYw1QGDNteN5gyYNV8HCbmx6h5UQX/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/AVvXsEh7rmCPIhqf2iBk2fbML5H3I1tSse9N6Bjdrt20CtNGrOncL5056vw389zBGLiv0-VRdQpJ4gbB5a_uQUIuD9c2bCWvy47fFvHcqmCs0vOpXI-DxqT9YsKhSVWNXxuaiXbOkKytaiSsVwa2/s1600/magnifier-hover.png) no-repeat
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7rmCPIhqf2iBk2fbML5H3I1tSse9N6Bjdrt20CtNGrOncL5056vw389zBGLiv0-VRdQpJ4gbB5a_uQUIuD9c2bCWvy47fFvHcqmCs0vOpXI-DxqT9YsKhSVWNXxuaiXbOkKytaiSsVwa2/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%