Stylish search box in html css code | stylish Search Box by html code
 |
| stylish search box in html css code |
<style type="text/css"> #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/AVvXsEiKxOXDJglE1hNfR5TyE9sfyLz_2JFVfReczMzJCv9-IhTvsXXvOjx0ooCub3LJBVJp8xlT9cFnXbRxF7GtHoM6XJlkYykD_I7jJX07Qr3tmzGmxyGmxOb9gv0w9AHuEthdag2jPLSsiTz_/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:0;padding:9px 0;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>
-----------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#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/AVvXsEiKxOXDJglE1hNfR5TyE9sfyLz_2JFVfReczMzJCv9-IhTvsXXvOjx0ooCub3LJBVJp8xlT9cFnXbRxF7GtHoM6XJlkYykD_I7jJX07Qr3tmzGmxyGmxOb9gv0w9AHuEthdag2jPLSsiTz_/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 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 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/AVvXsEhcNsLyGRECe8FMpo8lAVP0v994Yh0HaCDFcNp3FIYLwBPV7AXb_l68oa0yh1T6bG0e8Y9S9B6tJPhzyLzO3JhtM0mpk-ccQ92UaQCxt3V2C-eGosOwSUzHqeim3bbiL3Qr3xmS_et-hRIP/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;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 type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_aq1jKZY8b8IzRup3jmo9x3Qd9drxdzInuYEbYt3bCqnhGdbK-iaPtMhTQ1Eu3aaNvkcnsgXL7eHbVAymmdouJahjKDqUvLyR6UMwsRxsO0h1xWN0LorQMG6XHoJ4XxdDvGNahLwme4Y/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 0 0 20px;padding:5px 0;border-width:0;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/AVvXsEjOWWGs8cDCagX2m_fzs4N8iAIJxss5HRD1b7pX_tXlNR6vxePnH3rDvNdd5BpV0wvilhyiIOOYt-9d0xy-Icu39lf5XVojJSGLYNZ_CXDrsZaOzuzbOMq2D2gbDDkvt9hC_08iDCMXN1W7/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgeyGm4DLIUvWnjoBnx1mYncXWXQi4OxiY0RwDVsn0Nl6_k_3ehJD_ygiu-Owl_5Kd0Xst34z5M2_PKnWbmUZv7bndPzJ4f_cuMvk266kfmQEKyYMD33YispLQmV-sCQvXgSkqDnsdLCll/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgeyGm4DLIUvWnjoBnx1mYncXWXQi4OxiY0RwDVsn0Nl6_k_3ehJD_ygiu-Owl_5Kd0Xst34z5M2_PKnWbmUZv7bndPzJ4f_cuMvk266kfmQEKyYMD33YispLQmV-sCQvXgSkqDnsdLCll/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 type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCIO7Z2-Ih6EEFNIeAOFmrpTmOVCZpmzwyql2biLT8jWPU9emxDcN7aoWe2LKl0DnTTpL80iRT2rePylfQum6Y2ChkiwISsu2xF0f71iD4FRtmR-P7vtjV4YN35zr_Bum7Pbrm8md9V-X/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:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpN99dLq32uOK_PfFCril-1XdPXeX87t5SrEQSCm1g1GnSwMU8-4UIR6j3jYQ5nK77rLrbnvjh3TfqKylcBqA_s5hmv_ne-La7RxR4U5kaSswjCW5Pi0KTBMHQAzrmhmvVvcQcp1IWq3w/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLS0oZxg8A1ERSqem_chCOXOczlXcJruxEvnfks8eij3mDJhzLZA1roGfsBIZ653NITwOlbI0BYWhAFjo9eZX-EyJDKiEr-ThjO9x2CPGo4KZncYW65-bxYrBEdfxdPxVu1MNAbFq3SuR/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>