Custom Search Box For BlogSpot v1

 <style>
/* foulscode.blogspot.gr */
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmY-4n-5wZc3HYbwZypRJ8VY_0zg20mDV53jspL8y4ck2HsAhRhL4zjSuOGZ26D77jWS7bXihp_uAaHVkAEMLD4eOAshx9-5Ck4wMKB7MO37NTTSOT5sZRKg9R5WAd2UosPWNK57DiJ6P/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYy4s6f5eauN1qZ2a_1BzR9aDNONDSG7zjcgQU8epAZxCtCsVVzTDjydwT1UTKNxo7lvPhyBHfyFl2eYvkb5ORzJw2KX0rtQox1q-CerWdq9rmK_dpsvttodtCXAp5NFKICE_Kbzzk30t/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
/* foulscode.blogspot.gr */
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="αναζήτηση" />
<input id="button-submit" type="submit" value=" "/>
</form>