Top 5 Stylish Custom Search Box For Website

Blog me Custom stylish search box add karna Bahut simple hai. Basically jaydatar blog template me search box widget phale se hi add hota hai.

Lekin unka design kuch khas nhi hota hai. Fir blog  website me custom search box ko install karna padta hai.

Intop 5 best stylish search box design css coding se design kiye gaye hai. unhe aap apne blog me add kar skate hai.

Blog website me search box widget sabhi widget se kafi important hota hai. Because ishe  reader website per apne topic ko esaily search karke read kar skata hai.

Aur agar apke website search box widget ka design jayda acha nhi hai. To aap in 5 best  Search Box Design Css coding se custom search box Add kar skate hai.

• How To Hide OR Show Blogger Widget On Mobile

Blog me Custom stylish search box ko add karne ke liye me niche diye gaye steps ko follow karke easily blog website me search box widget add kar skate hai.

How to Add Stylish Search box On website

<style> #search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;} #bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;} .bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;} .bo-sb-buttonwrap:hover {background-color: #c9302c;} .bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;} .bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: ”;top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;} .bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: ”;top: 19px;height: 8px;background: white;} #bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;} #bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id=”search-box-danger”> <form action=”/search” id=”bo-search-box” method=”get”> <input id=”bo-sb-input” name=”q” placeholder=”Search Here…” type=”text” required/> <span class=”bo-sb-buttonwrap”><button class=”bo-sb-submit” value=”” type=”submit”></button></span> </form> </div> Blogger Search Box

Search Box Design Css Style 2.

<style> #search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;} #bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;} .bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;} .bo-sb-buttonwrap:hover {background-color: #31b0d5;} .bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;} .bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: ”;width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;} .bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: ”;width: 2px;left: 21px;height: 8px;background: white;top: 19px;} #bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;} #bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;} </style> <div id=”search-box-info”> <form action=”/search” id=”bo-search-box” method=”get”> <input id=”bo-sb-input” name=”q” placeholder=”Search Here…” type=”text” required/> <span class=”bo-sb-buttonwrap”><button class=”bo-sb-submit” value=”” type=”submit”></button></span> </form> </div>

Search Box Design Css Style  3.

<style> #search-box-primary {float:none;position:relative;height: 36px;width:100%;margin:0 auto;} #bo-search-box{margin:0;padding:0;position:relative;background:#fff;height: 35px;border:1px solid #ddd;line-height:1.5em;border-radius:5px;font-weight:normal;} .bo-sb-buttonwrap {cursor: pointer;height: 35px;position: absolute;border-bottom-right-radius: 5px;right: 0;border: none;width: 14%;background-color: #337ab7;top: 0;border-top-right-radius: 5px;display: block;} .bo-sb-buttonwrap:hover {background-color: #286090;} .bo-sb-submit {cursor: pointer;margin-top: -17.5px;position: absolute;top: 50%;background: transparent;right: 50%;width: 35px;height: 35px;border: none;margin-right: -17.5px;} .bo-sb-submit:after {width: 8px;left: 10px;content: ”;top: 9px;height: 8px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 2px solid white;} .bo-sb-submit:before {transform: rotate(-35deg);height: 8px;background: white;position: absolute;width: 2px;top: 19px;content: ”;left: 21px;} #bo-sb-input {border: none;width: 84%;color: #333;padding: 0 15px; height: 35px;position: absolute;border-bottom-left-radius: 5px;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;} #bo-sb-input:focus {border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;} </style> <div id=”search-box-primary”> <form action=”/search” id=”bo-search-box” method=”get”> <input id=”bo-sb-input” name=”q” placeholder=”Search Here…” type=”text” required/> <span class=”bo-sb-buttonwrap”><button class=”bo-sb-submit” value=”” type=”submit”></button></span> </form> </div>

Search Box Design Css Style  4.

<style> #search-box-success {height: 36px;float:none;position:relative;width:100%;margin:0 auto;} #bo-search-box{background:#fff;line-height:1.5em;height: 35px;border-radius:5px;border:1px solid #ddd;margin:0;padding:0;font-weight:normal;position:relative;} .bo-sb-buttonwrap {background-color: #5cb85c;display: block;border: none;border-top-right-radius: 5px;height: 35px;height: 35px;position: absolute;right: 0;border-bottom-right-radius: 5px;width: 14%;top: 0;cursor: pointer;} .bo-sb-buttonwrap:hover {background-color: #449d44;} .bo-sb-submit {position: absolute;margin-right: -17.5px;right: 50%;margin-top: -17.5px;cursor: pointer;top: 50%;height: 35px;width: 35px;background: transparent;border: none;} .bo-sb-submit:after {top: 9px;border-radius: 50%;content: ”;height: 8px;width: 8px;border: 2px solid white;left: 10px;position: absolute;box-sizing: content-box;} .bo-sb-submit:before {width: 2px;top: 19px;height: 8px;position: absolute;background: white;left: 21px;content: ”;transform: rotate(-35deg);} #bo-sb-input {padding: 0 15px;background-color: #fff;border-bottom-left-radius: 5px;height: 35px;transition: all 0.5s;color: #333;outline: none;width: 84%;border: none;position: absolute;border-top-left-radius: 5px;} #bo-sb-input:focus {box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id=”search-box-success”> <form action=”/search” id=”bo-search-box” method=”get”> <input id=”bo-sb-input” name=”q” placeholder=”Search Here…” type=”text” required/> <span class=”bo-sb-buttonwrap”><button class=”bo-sb-submit” value=”” type=”submit”></button></span> </form> </div>

Search Box Design Css Style  5.

<style> #search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;} #bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;} .bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;} .bo-sb-buttonwrap:hover {background-color: #e6e6e6;} .bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;} .bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: ”;position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;} .bo-sb-submit:before {content: ”;background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;} #bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;} #bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id=”search-box-default”> <form action=”/search” id=”bo-search-box” method=”get”> <input id=”bo-sb-input” name=”q” placeholder=”Search Here…” type=”text” required/> <span class=”bo-sb-buttonwrap”><button class=”bo-sb-submit” value=”” type=”submit”></button></span> </form> </div>

i Hope apka 5 Stylish custom search box design pasand aye honge.

in stylish search box design, css style jaise  match karne wala in, 5 stylish custom search box ko add kar skate hai. Aur Custom search box blog me add karne me khoi problem ho hame comment kare.

Asha karta apko 5 stylish custom search box  pasand ayhe honge to is post ko social media aur other blogger ke sath jarur share kare.

Read Most:-

• How To Hide OR Show Blogger Widget On Mobile
• Dusre Blog Par Comment Karne ke 5 Behtreen Fayde Blogger ke liye
• How To Hide OR Show Blogger Widget On Mobile