Stylish Search Box In POPUP For Blog And Websites

Search boxes not only help to increase your website’s design usability, but they’re very convenient to site visitors and regulars. For those that have been to your site before, they know what they want and they want it now. These are the impatient people who don’t feel like wading through different links. If you don’t accommodate this problem you might risk losing those readers.

The full screens search is becoming one of the significant parts of a website. With an increase in the number of mobile users, people are slowly inching towards full screen search as it dramatically improves the searching experience of mobile users. Since, mobiles are happen to be small in size, adding a full screen search would make it easier to type and search your website.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code Added.
3.) CSS3 Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

CSS:

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #2EB0EC;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<style>
#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999;}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;}
#popup_searchBox_Data{position:absolute;top:50%;left:50%;width:300px;height:100px;margin:-50px 0 0 -150px;color:#FFFFFF;z-index:9999;}
</style>
<style>
.search-form-wrapper{background:#000;background:rgba(0,0,0,.8);z-index:99;position:fixed;width:100%;height:100%;left:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;color:#fff;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}
</style>

HTML:

<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />
</form>
</div>
<div id="popup_searchBox" style="display:none;">
<div id="popup_searchBox_Data">
<!-- Search Box -->
<div class="search-form-wrapper" style="display: block;">
<div class="search-form-overlay"></div>
<form action="/search" class="search-form" method="get">
<label class="search-form-label">Type something and Enter <button onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button></label>
<input class="search-text" name="q" type="text" value="">
<button class="hide search-submit" style="display:none;" type="submit"><trans>Search</trans></button>
</form>
</div>
<!-- Search Box -->
</div>
</div>

Customization:

1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…