Add Style Custom Search Boxes To Your Blogger

Please copy code html down below






<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmJDvZsmUXOpII1sUWG7glwYTWQdEUXtSdUxTotkQr0fnjTwrp3khMc_ck3TU7zwayCtEwVjuhBbGgNGkRSN9rH_aXGaz66sD4zJrNwcBd5UtueC9v17IUflzBk2kglROxINbRYKIXncC/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

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

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

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

#searchbox input {
    outline: none;
}

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

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rcYEvUZ9R-0OAdNDcH6dX1XoGeme3GLxjloDMYSXnbcKx_D92KD93pZXguQAwAT8aVJGb9LxUrJJKK7XsPyZclbCnaSPjEmjGoLUJ_r5r1CQOffEr2oVtqzKIqZEsiE0DNTIT6Vm8RDn/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAttxchyZLx-8-ZxbStX6qx5xrolTIktZRUlq7g4WDy14OCRvE93lpd3qo0-D4aDw9mcDLjylsTZWDwD7dW-oJcRqZn2YgGRW_rXOVe_n5FEQJVNhRLj-S1hjA6LZEVlbvuJmKBwpY2Tzb/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

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

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

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

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

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

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NB0wHZnFfUmber5ZOv5N6OwqdpTW_XGz0WEjL-i_r5YGHGcYKn3PRgzu8Pnl5iO5m2QHiSeourzZ_QN6xpynDyozreRwqfMMzTPa68Q-tBvrTDBlg34-326gZVZ-Sc21Id1RtDVjZ5IR/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

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

<style>
#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/AVvXsEh4NB0wHZnFfUmber5ZOv5N6OwqdpTW_XGz0WEjL-i_r5YGHGcYKn3PRgzu8Pnl5iO5m2QHiSeourzZ_QN6xpynDyozreRwqfMMzTPa68Q-tBvrTDBlg34-326gZVZ-Sc21Id1RtDVjZ5IR/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/AVvXsEjx8cSpWMBgaX53OsTgPyiahmuoBZ4Ta4m204sR4wxQGizPnZxFNLbCOKH0priBntVowJNvgczZY4Ta-4sQNbC-458zV1qsTUfIZAb_NUXXRgdnvnalNYMSFJC6rXw2gXdl5sysVxloGCsI/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

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