Top 5 Stylish Search Box widget Code for Blogger blog

Code 1: Stylish Search Box widget Code:-

<style> #searchbox { background: #d8d8d8; border: 1px ; padding: 5px 5px; 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/AVvXsEiZN-cYbVJhKwt1_Zw8jzAYb8esyu78Pv2-4kK419U3j_zmbdsp06b7BDOqQYhLW7JzrjCSUpOSw-Qr9t4lQWhmhmuxqbCZ6dtanJpTevt1qwA69WWRa42fwvX-OabyoX2GN83xQuVzCjfe/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>

Code 2: Stylish Search Box widget Code:-

<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/AVvXsEiZN-cYbVJhKwt1_Zw8jzAYb8esyu78Pv2-4kK419U3j_zmbdsp06b7BDOqQYhLW7JzrjCSUpOSw-Qr9t4lQWhmhmuxqbCZ6dtanJpTevt1qwA69WWRa42fwvX-OabyoX2GN83xQuVzCjfe/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/AVvXsEh3iXnvvBr_yN3kfZYtVOLVl5nF1s25G0aGxy7IeAojBAPaTXjHX-wE1Loeh4nY7k8LtjbAxS7Z8mAQTIwfP3BWJ_gHYk6xBwE88d-xPEpwmNtm_7NXXyWkreIcUS3I21UXLTEQUVCiPIsi/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>

Code 3: Stylish Search Box widget Code:-

<style> #searchbox { width: 280px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZyGZF8LdaDS3_LYgF6XqwucR11i2m7eohS6mjr4_Ke7Fvu2NFH2t9DZH3q-s3I3BKriwEH272uIvW_1RsBi52s6yjnTBcFmPb6p_rlh2ajPzO8-ahgG6uND6NZrnZFh2nITR5XX5lc6M5/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/AVvXsEiXqa3wyjKb147krVnl5NCDfcHNY1W33sc1jPu_1keYViRSBKA1C_DVcGE-C2Z8H20BytpCiTYjBpsXtLCX4iTJ_ogMOblR_5-vywJF1ZjZEtDd5kwyXPfAZ3lR7yQAc7HydNyHo5Ph7Oqp/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/AVvXsEjX8QwPTIsSoZ0UDw_6-RN4fELMVWrq34qndtPR_ZClkRe_LBzXz2YhGK_C0p9BnjNBAdEcXHUTzkRfofyVrhrRMkLLTD0TxQiv3VyX8rri9d5YtwALZCC2l_aox8z_rKnZWa82q2APBZ5o/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>

Code 4: Stylish Search Box widget Code:-

<div class="flexsearch"> <div class="flexsearch--wrapper"> <form class="flexsearch--form" action="/search" method="get"> <div class="flexsearch--input-wrapper"> <input class="flexsearch--input" type="text" placeholder="search here..." name="q" /> </div> <input class="flexsearch--submit" type="submit" value="&#10140;"/> </form> </div> </div> <style> .flexsearch--wrapper { height: auto; width: auto; max-width: 100%; overflow: hidden; background: transparent; margin: 0; position: static; } .flexsearch--form { overflow: hidden; position: relative; } .flexsearch--input-wrapper { padding: 0 60px 0 0; /* Right padding for submit button width */ overflow: hidden; } .flexsearch--input { width: 100%; } .flexsearch--input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; height: 20px; padding: 0 46px 0 10px; border-color: #888; border-style: solid; border-width: 2px; margin-top: 2px; color: #333; font-family: 'Helvetica', sans-serif; font-size: 20px; -webkit-appearance: none; -moz-appearance: none; } .flexsearch--submit { position: absolute; right: 0; top: -10px; display: block; width: 60px; height: 60px; padding: 0; border: none; margin-top: 20px; /* margin-top + border-width */ margin-right: 2px; /* border-width */ background: transparent; color: #888; font-family: 'Helvetica', sans-serif; font-size: 27px; line-height: 60px; } .flexsearch--input:focus { outline: none; border-color: #2288bb; } .flexsearch--input:focus.flexsearch--submit { color: #333; } .flexsearch--submit:hover { color: #2288bb; cursor: pointer; } ::-webkit-input-placeholder { color: #888; } input:-moz-placeholder { color: #888 } </style>

Code 5: Stylish Search Box widget Code:-

<div class="flexsearch"> <div class="flexsearch--wrapper"> <form class="flexsearch--form" action="/search" method="get"> <div class="flexsearch--input-wrapper"> <input class="flexsearch--input" type="text" placeholder="search here..." name="q" /> </div> <input class="flexsearch--submit" type="submit" value="&#10140;"/> </form> </div> </div> <style> .flexsearch--wrapper { height: auto; width: auto; max-width: 100%; overflow: hidden; background: transparent; margin: 0; position: static; } .flexsearch--form { overflow: hidden; position: relative; } .flexsearch--input-wrapper { padding: 0 60px 0 0; /* Right padding for submit button width */ overflow: hidden; } .flexsearch--input { width: 100%; } .flexsearch--input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; height: 20px; padding: 0 46px 0 10px; border-color: #888; border-radius: 32px; /* (height/2) + border-width */2 border-style: solid; border-width: 2px; margin-top: 2px; color: #333; font-family: 'Helvetica', sans-serif; font-size: 20px; -webkit-appearance: none; -moz-appearance: none; } .flexsearch--submit { position: absolute; right: 0; top: -10px; display: block; width: 60px; height: 60px; padding: 0; border: none; margin-top: 20px; /* margin-top + border-width */ margin-right: 2px; /* border-width */ background: transparent; color: #888; font-family: 'Helvetica', sans-serif; font-size: 27px; line-height: 60px; } .flexsearch--input:focus { outline: none; border-color: #2288bb; } .flexsearch--input:focus.flexsearch--submit { color: #333; } .flexsearch--submit:hover { color: #2288bb; cursor: pointer; } ::-webkit-input-placeholder { color: #888; } input:-moz-placeholder { color: #888 } </style>

Back to - How to Add Stylish Search Box gadget to Blogger blog