Custom Search Box For BlogSpot v2

 

Αντιγραφή τον παρακάτω κώδικα:


<style>
/* foulscode.blogspot.com */
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMR6Zp5-Q8qik-KfIHPCiLenATAAc2duslpX3oRtrMlk91ryWXvUdRsCo09emPjaRJrBEDkG82LP8We_1x72qUC7xhcwtrDB5NQn1n6gjV-HGciEy1pXtnYt8R6JluP_zQNxC4LTVihzn/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;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    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/AVvXsEjhDeOroVGf4ZbqR1OSTn8cklXHTf_JvnStaUTmN4405ZcJ3dWaKHI0j_VZTY7VBsy5YbJzuZpwMW2TC0gINiCiNKwWnrhs8nhqnmLiOVNQf76_j_1exyTZfExvHAXjNcAu1rcT-CiDv7yA/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDroftHQW9a6fvKlPfcx5Jwcyy_qvjX4a5K9P8Bfgnb_u1QzpIvpkmuzHSRPI9Vm9rM2cQWpCgxOJ432O69xKqA0kb8imaHOm5_Vj-9vKKuDvu2hrLGSc5vizrhmMCNGgtXPanPss7VWNK/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDroftHQW9a6fvKlPfcx5Jwcyy_qvjX4a5K9P8Bfgnb_u1QzpIvpkmuzHSRPI9Vm9rM2cQWpCgxOJ432O69xKqA0kb8imaHOm5_Vj-9vKKuDvu2hrLGSc5vizrhmMCNGgtXPanPss7VWNK/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
/* foulscode.blogspot.com */
</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>

DEMO
Κατηγορίες:
Σχόλια