how add style on your search box custom - Iroma9ja

Monday, March 21, 2016

how add style on your search box custom


Here is the code to past, past it in a new Gadget 
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzHDKNk_IfS-h6izXSF19dF8YgWLugbe-zjftgKNDiZSaa6VimupZK411D5qAFLnVXJ_ooyoksUls4b4y1zWBoEriHQZ2uAw0FhWi4d89ai7ogHlDF3PONKb3je284mNtKTmQdJGnuaEuR/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/AVvXsEiCDBs8_MJgUm5SAw2cfrF4ScLtiRicpZLO8lW17nypMA_9n3LLyniKkj_Fw0Tso6CIVmNCm0Xyv8vB37oXwmdQZKp6f1eD9leg7F_95I5rzy4dz-jLkqGOeob0FgPAyMdlFQLZnBgz3ZwQ/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/AVvXsEhRAA1Gf4DBe0NEAvg2uGNu03VZVOkT2uElDYPC34zVgNOMN0svf15XMVthFm17CG60WZMuUPrZcUaYmq9vzG2Ta7-_EOEJNVBJHkUM-YPbfyoBg8oaTmuDuLqofZOHibcprivbEfGdCDIA/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAA1Gf4DBe0NEAvg2uGNu03VZVOkT2uElDYPC34zVgNOMN0svf15XMVthFm17CG60WZMuUPrZcUaYmq9vzG2Ta7-_EOEJNVBJHkUM-YPbfyoBg8oaTmuDuLqofZOHibcprivbEfGdCDIA/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#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>
Your Comment and experience will be useful to others so please use the comment box below.