Custom Search box

Style 1
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHmLxf_joXf6LnjQsob6f7DSz_rlBmnSE9oW1IKMgcBENjLaU8P0rYv12h-n7raIU-ZECcaGGgOJYSs8Md7R5DcdP3EwU2DYIlD_j2Tm4a4wnI4d8d178yWH_XDJSB0nuRe78smt5IRhTM/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/AVvXsEgkU7aBZTJaJSTbBIS0I24L9Z0bXkTEI71_tBV-yYZPycBlEABTP4DrzhsIOvcmGGHKLExOu_7Nol03vhwCpHwwdwvCj6_TJz-FSE22anZFK0kG5H6X8iNAcTGFbk9tzKlOCrODw6VCZmqu/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/AVvXsEjIjX3_YOdKcv-0PVJ_pzbJA4Efkxk7f095nBkigjmZ_Nfk3VeyHghkMB3hhal0FF9bDlOHhG44aFIwsBZAMr9dgH-Wtkd6U7cyMBOJidYBQjWDIFrkGM7gz4-8OXhsjSpl-3dp4hKBFXL7/s1600/search-icon-hover.png);
}
</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>
style 2 
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi9LCccogs2naksIzbr4mFXldb-NOuhldgbbshgeum3HCG950Cgsk3yjwbAO81vlF6ygqfLIbL31uhNcDM962Rpb15S6WfBTlr8Wr12sMmKMENRVAuegBYAELS9SMj1SlgIj_O3fuPlHZd/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

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;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipijEIIh6ln0EbEJlvWv4HTu1vSvpJNajdhqwfrbHfBI00s4lpYAlX1fpiv24ExBrYXHdjG0r9X3keSSVWdf6mU_n12hbzmJf3cGE0GWYk2lJA5InPRmIxk5VTMC8ma7eU-2KAzKdXGDfI/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1N62VAgsqy2AkNYU6KsX_hqt38ZmU-k-YsAE8_OM2q7r23LSe7NlB8gH1XDgDRqLU5jb61Wmo24HZvD1wWvF3YTIEsNPyU0PnZDAjcFqiin5yMRgRdjKfCbf54wa2pF3zSAWKN_8ttGRT/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1N62VAgsqy2AkNYU6KsX_hqt38ZmU-k-YsAE8_OM2q7r23LSe7NlB8gH1XDgDRqLU5jb61Wmo24HZvD1wWvF3YTIEsNPyU0PnZDAjcFqiin5yMRgRdjKfCbf54wa2pF3zSAWKN_8ttGRT/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 class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>
Style 3
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9gsGnCobn3H1nAeqAt9cZm02BMte716Jb5lo37RA1xQBpemIZVizqv_7YSh6Hq_hx4dULACzPQviP3N2o-Eq-bOibTyj4gu540KEcNwC0Y2HR1PIc4gyX7cg5cvt0dvmxwAJJBHIDkWL/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/AVvXsEjU-I7qPJq6Vzasyjq_7aPDPpX0IhIXpPnxMegHZ5yMwzwuYINjZ041JxQNiu3TTyRpopWJbifgj9RBYJ20FzSR-eojHf8bm-KIOcsadyxGG2k_HR53Th0SPVNOqYnB0NE-il8uk47w4551/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/AVvXsEgOIh9puPnMmpSX2dCqvyjYQKFjxwd3IZ0N8YmGxwQyZqMhn6oDSi_VnVAwbGrX3Ti3LRKmQfgc8kb_yFDyrmV4lUdzj3SANe7xc0r9SkVJosouB6B7TospnFHCZP8o09Q048fyCEAtzlSh/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 4
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolrLfK2v5cf1ebgS8RRKBqPzKSHXl8EnmqhknFbqPYz8AFrMM3o8wQ0ATBr-zxLdMKoNevKL_PfTElKGrtEOW9mhliMirrSsSHJTQs-mi43ua_KovX4J3aSwKGAJBzYJAWHanVAHHOfpr/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/AVvXsEgh2wtTmE3byxmDqUeOQTKPa698XPn73nslfgVBxayQ0DsxZdP0ACOywBrCjA66mEqTgBskMGaSfYW3jg3HRlkzAAtcSl0kc9Fi3C07RVIcBOpKgua6SvU4ZF9TdXN39bG5LhcfNIyMcWgF/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/AVvXsEgtkrS2u-SfPZUVUyHYAP5KQJSzEAqUaeFpgTD2VfzhQihyphenhyphenvTS583rS76QKEG_mDXGn80BhxTp0RMuUjKfhu2_10RJTYNNrgoYrV1mebddrX2_j58BCpaHt_F_KA0DZNV7ESTQtuaK-YSgi/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtkrS2u-SfPZUVUyHYAP5KQJSzEAqUaeFpgTD2VfzhQihyphenhyphenvTS583rS76QKEG_mDXGn80BhxTp0RMuUjKfhu2_10RJTYNNrgoYrV1mebddrX2_j58BCpaHt_F_KA0DZNV7ESTQtuaK-YSgi/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>
Style 5
<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/AVvXsEgOdl2Y6Vlq_WP0xlzThGPnjugfTWUi6yZz-WQKwMrTcsKCvWo9c4BYNGtpYBMY5ioxV98BIvbMdBXX7yar0hl8OLQi_p-Wx2XVLEoorZ_lAmSNxZiWgy-9d54BZZtvdG2_xxuIjOCNrA-_/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/AVvXsEj7_KCDhlYHaYp0kpiXEfsC3hWfOl62u0aMEBXAHYpnRd4CDAzDtCrIaMtnuWhyphenhyphenlBTLzdGsQ0MCYZNk_0p0e4CSpZqfiy-L5YYAQtltjo5wkVhG6e49UULM_PWke_DOIXxBVnMASWUpZLM8/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>
Style 6
<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/AVvXsEgOdl2Y6Vlq_WP0xlzThGPnjugfTWUi6yZz-WQKwMrTcsKCvWo9c4BYNGtpYBMY5ioxV98BIvbMdBXX7yar0hl8OLQi_p-Wx2XVLEoorZ_lAmSNxZiWgy-9d54BZZtvdG2_xxuIjOCNrA-_/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>