Blog ya Website ke liye stylish Search Box

4

Hello visiters jaise k mene apko pehle b bataya tha k me search box se related kush new stylish design post kruga. asha karta hu k apko jarur pasand ayenge.

Search Box Code:

1. Elegant green Search box:

search box

<style>

#nbc-searchgreen1

{

background: rgb(143,196,0); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#8fc400′, endColorstr=’#8fc400′,GradientType=0 ); /* IE6-9 */

border-radius:10px;

width:290px;

}

#nbc-searchgreenbox1

{

padding:10px;

}

#nbc-searchgreensubmit1

{

border:1px solid green;

background: green;

padding:5px;

color:#ffffff;

font:14px verdana;

}

#nbc-searchgreeninput1

{

-moz-border-radius: 10px;

-khtml-border-radius: 10px;

-webkit-border-radius: 10px;

border:1px solid #ffffff;

background:#ffffff;

padding:5px;

color:#888888;

font:14px verdana;

}

</style>

<div id=’nbc-searchgreen1′>

         <form expr:action=’/search/max-results=8′  method=’get’ id=”nbc-searchgreenbox1″>

            <input name=’q’ id=’nbc-searchgreeninput1′ onblur=’if (this.value == “”) {this.value = “Search this site…”;}’ onfocus=’if (this.value == “Search this site…”) {this.value = “”}’ type=’text’ value=’Search this site…’/>

            <input id=’nbc-searchgreensubmit1′ type=’submit’ value=’Search’/>

         </form>

      </div>

2. Floating search box

search box

<style type=’text/css’>

/*<![CDATA[*/

#sbutton {

background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));

background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);

background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);

background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);

background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;

border: 1px solid #3079ED;

border-radius: 2px 2px 2px 2px;

color: #FFFFFF;

height: 27px;

min-width: 76px;

padding: 0 21px;padding-bottom: 2px; }

#sbutton:hover{    background-color: #357AE8;

background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));

background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);

background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);

background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);

background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);

border: 1px solid #2F5BB7;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}

#simg {

background: url(http://3.bp.blogspot.com/-rBTMRhkUv5A/Ue6_qllr4lI/AAAAAAAAAhc/Hbq9V3tFvqo/s1600/noxdo_blogspot_com_Search-icon2.png) no-repeat scroll 0 0 transparent;

display: inline-block;

height: 14px;

margin: 0;

width: 17px;z-index:101;

}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}

#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}

#s:focus {width: 200px;}

.noop-searchbox {

display: block;

position: fixed;

right: 12px;

top: 1%;

max-width: 300px;min-width: 238px;

z-index: 100;}

/*]]>*/

</style>

<div class=’noop-searchbox’ id=’noop-searchbox’>

<form action=’/search/max-results=8′ id=’noop-searchform’ method=’get’>

<input id=’s’ name=’q’ onblur=’if (this.value == “”) {this.value = “Search…”;}’ onfocus=’if (this.value == “Search…”) {this.value = “”}’ type=’text’ value=’Search…’/>

<button id=’sbutton’ type=’submit’><span id=’simg’></span></button>

</form></div>

3. White Search box:

<style type=”text/css”>

#nbc-searchbox{background:url(http://3.bp.blogspot.com/-A_B_jk1yrIY/Ue7A4JLAVlI/AAAAAAAAAhs/JPrpQvYA-7w/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#nbc-searchform{display: block;padding: 12px;margin:0;}

form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id=”nbc-searchbox”>

<form id=”nbc-searchform” action=”/search/max-results=8″ method=”get”>

    <input type=”text” id=”s” name=”q” value=””/>

</form>

</div>

4. Dynamic width (Expandable) Search box:

Generally:

search box

After mouse hover effect:

search box

<style>

#nbc-searchexpandbox1

{

padding:10px;

}

#nbc-searchexpandsubmit1

{

border:1px solid #111111;

background: #111111;

padding:5px;

color:#ffffff;

font:14px verdana;

}

#nbc-searchexpandinput1

{

-moz-border-radius: 10px;

-khtml-border-radius: 10px;

-webkit-border-radius: 10px;

border:1px solid #dcdcdc;

background:#ffffff;

padding:5px;

color:#888888;

font:14px verdana;

transition: width 2s;

-webkit-transition: width 2s; /* Safari */

-o-transition: width 2s; /* Opera*/

-moz-transition: width 2s; /* firefox*/

width:65px;

}

#nbc-searchexpandinput1:hover

{

width:200px;

}

</style>

<div id=’nbc-searchexpand1′>

         <form expr:action=’/search/max-results=8′  method=’get’ id=”nbc-searchexpandbox1″>

            <input name=’q’ id=’nbc-searchexpandinput1′ onblur=’if (this.value == “”) {this.value = “Search this site…”;}’ onfocus=’if (this.value == “Search this site…”) {this.value = “”}’ type=’text’ value=’Search this site…’/>

            <input id=’nbc-searchexpandsubmit1′ type=’submit’ value=’Search’/>

         </form>

      </div>

5. Clean Search Box:

search box

<style>

#nbc-searchsimplebox1

{

padding:10px;

}

#nbc-searchsimplesubmit1

{

border:1px solid orange;

background: orange;

padding:5px;

color:#ffffff;

font:14px verdana;

}

#nbc-searchsimpleinput1

{

-moz-border-radius: 10px;

-khtml-border-radius: 10px;

-webkit-border-radius: 10px;

border:1px solid #dcdcdc;

background:#ffffff;

padding:5px;

color:#888888;

font:14px verdana;

}

</style>

<div id=’nbc-searchsimple1′>

         <form expr:action=’/search/max-results=8′  method=’get’ id=”nbc-searchsimplebox1″>

            <input name=’q’ id=’nbc-searchsimpleinput1′ onblur=’if (this.value == “”) {this.value = “Search this site…”;}’ onfocus=’if (this.value == “Search this site…”) {this.value = “”}’ type=’text’ value=’Search this site…’/>

            <input id=’nbc-searchsimplesubmit1′ type=’submit’ value=’Search’/>

         </form>

      </div>

6. Round corner search box

search box

<style>

#search-form {

background: #e1e1e1; /* Fallback color for non-css3 browsers */

width: 365px;

background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));

background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;

box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); }

input[type=”text”]{

background: #fafafa;

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));

background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0; border-bottom: 1px solid #fff;

border-right: 1px solid rgba(255,255,255,.8);

font-size: 16px; margin: 4px; padding: 5px; width: 250px;

border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;

box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); }

input[type=”text”]:focus{outline: none; background: #fff;

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));

background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); }

input[type=”submit”]{

background: #44921f;

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));

background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0; color: #eee; cursor: pointer;

float: right; font: 16px Arial, Helvetica, sans-serif; font-weight: bold; height: 30px;

margin: 4px 4px 0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none;

border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;

box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);

-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); }

input[type=”submit”]:hover {

background: #4ea923;background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }

input[type=”submit”]:active {

background: #4ea923;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }

</style>

<form action=”/search/max-results=8″ id=”searchbox”>

<input name=”cx” type=”hidden” value=”X:Y” />

<input name=”cof” type=”hidden” value=”FORID:11″ />

<input id=”q” name=”q” size=”70″ type=”text” />

<input name=”sa” type=”submit” value=”Search” />

</form>

7. Black and white color Search box:

search box

<style type=”text/css”>

#nbc-searchbox{background:url(http://4.bp.blogspot.com/-xDMUT_7p820/Ue7AMp2_XZI/AAAAAAAAAho/N2xwuQ1GU1I/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}

form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id=”nbc-searchbox”>

<form id=”nbc-searchform” action=”/search/max-results=8″ method=”get”>

    <input type=”text” id=”s” name=”q” value=”Search…” onfocus=’if (this.value == “Search…”) {this.value = “”}’ onblur=’if (this.value == “”) {this.value = “Search…”;}’/>

</form>

</div>

8. Dark black Search box:

search box

<style>

#nbc-searchblack1

{

background: #222222;

border-radius:10px;

width:290px;

}

#nbc-searchblackbox1

{

padding:10px;

}

#nbc-searchblacksubmit1

{

border:1px solid #222222;

background: #dc4523;

padding:5px;

color:#ffffff;

font:14px verdana;

}

#nbc-searchblackinput1

{

-moz-border-radius: 10px;

-khtml-border-radius: 10px;

-webkit-border-radius: 10px;

border:1px solid #ffffff;

background:#ffffff;

padding:5px;

color:#888888;

font:14px verdana;

}

</style>

<div id=’nbc-searchblack1′>

         <form expr:action=’/search/max-results=8′  method=’get’ id=”nbc-searchblackbox1″>

            <input name=’q’ id=’nbc-searchblackinput1′ onblur=’if (this.value == “”) {this.value = “Search this site…”;}’ onfocus=’if (this.value == “Search this site…”) {this.value = “”}’ type=’text’ value=’Search this site…’/>

            <input id=’nbc-searchblacksubmit1′ type=’submit’ value=’Search’/>

         </form>

      </div>

9. White color Search box:

search box

<style>

#MBBOldSearch {

display: block;

clear: both;

margin: 10px 0;

}

#MBBOldSearch #MBBSinput {

background: url(http://4.bp.blogspot.com/-C7mh2vX4gp4/Ue6-L3iTnXI/AAAAAAAAAhI/-K6xVaVoM1g/s1600/noxdo_blogspot_com_Search-icon.png) no-repeat scroll 8px center transparent !important;

padding: 7px 15px 7px 35px !important;

color: #444;

font-weight: bold;

text-decoration: none;

border: 1px solid #D3D3D3 !important;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

-moz-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

width: 52%;

}

#MBBOldSearch #MBBSsubmit {

color: #444;

font-weight: bold;

text-decoration: none;

padding: 6px 15px;

border: 1px solid #D3D3D3;

cursor: pointer;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#FBFBFB’, endColorstr=’#F4F4F4′,GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

</style>

 <div id=”MBBOldSearch”>

    <form action=”/search/max-results=8″>

        <input name=”q” id=”MBBSinput” type=”text” />

        <input value=”Search” id=”MBBSsubmit” type=”submit” />

    </form>

</div>

10. Grew Color Search Box

search box

<style type=”text/css”>

#nbc-searchbox{background:url(http://1.bp.blogspot.com/-NN0X9atWQVA/Ue7BSA-RMFI/AAAAAAAAAh0/hlsMUg1hQko/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#nbc-searchform{display: block;padding: 12px;margin:0;}

form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id=”nbc-searchbox”>

<form id=”nbc-searchform” action=”/search/max-results=8″ method=”get”>

    <input type=”text” id=”s” name=”q” value=””/>

</form>

</div>

11. Red Clor Search Box

search box

<style type=”text/css”>

#nbc-searchbox{background:url(http://3.bp.blogspot.com/-DqQKomzx0pw/Ue7BlSCh3zI/AAAAAAAAAiA/U3c87KbsBQc/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}

form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id=”nbc-searchbox”>

<form id=”nbc-searchform” action=”/search/max-results=8″ method=”get”>

    <input type=”text” id=”s” name=”q” value=”Search…” onfocus=’if (this.value == “Search…”) {this.value = “”}’ onblur=’if (this.value == “”) {this.value = “Search…”;}’/>

</form>

Apko j article kaisa lagaaa jarur comment kare.. agar apko koi preshani ati hai toh b muje bataye and keep visiting guys

Hi Guys, Welcome to HarpreetKumar.Com I’m Harpreet Kumar, a professional Hindi blogger from Punjab, India. On this blog, I’m going to provide you exclusive fresh & usefull content about SEO, Adsense, WordPress, Blogger, Making Money & Internet related all other topics etc.

4 COMMENTS

LEAVE A REPLY