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.
Subscribe to:
Post Comments (Atom)
ConversionConversion EmoticonEmoticon