Custom Search Box For BlogSpot v3
<style>
/* foulscode.blogspot.com */
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnNC_bt59Pkk4TVRbzEOlscWEviFu-NWMjl84KzzNCPAdC6Y7zW9ld9OZfi-B-QJsDteIQmA6Bt3Z5A42LatxBTHAHYPJGXmgglYQVz9FrRqpDb6AhC-MrCxfHA4TNPDQnvsPcX5no5uxc/s1600/search-box.png) no-repeat;
}
#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: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijurFGvX5V_IBbaK9MgqE7lzKJ6Ygz57hKON16_AB3GQzrLohivYB-inSQi6HeExJHimuN-X4WhqVuDBUnWBHMiXUCFTosBqvT_EJbhNMpYge00lEXYeWp7BXuNbVqfv1mEBym_Mn9oGrv/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGnFtMrfjM3C4LRIXldnNUNiX6qUopEcTVYv4I2xiiZdvLHpoyGyF_za2uT8Wxb-mRBRJ_CTKuV467lrX0Pn9PdqoIpjt-a8f18CU0vF8kbbfiuuIZs-I7NLccDxOU3Ji_8zcnuEKPm75a/s1600/search-icon-hover.png);
}
/* foulscode.blogspot.com */
</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>
DEMO
Κατηγορίες:
Επίσης γίνετε να φτιαξω δικό μου σχέδιο για search box,ή οτιδήποτε,με Photoshop?
Ευχαριστώ!