How To Create a Fullscreen Search Box Without js
How To Create a Fullscreen Search Box,Full-Screen Overlay Search Box,Full screen Search bar using CSS,Stylish search box in HTML
The stylish full-screen search box on a popup with pure css method for the header, the search form will be displayed when we click on the search icon at the header.
A fullscreen search layout allows you to take full advantage of your search at a visual level. That means the customer “goes into search”, the deepest possible way. Ensuring 100% of their focus is on the site’s search and product results.
How To Create a Fullscreen Search Box
Step 1) Add HTML:
<!--[ Full Screen Search Box by Anutrickz ]-->
<div class='AT-Search'>
<input id='AT-Search' name='search' tabindex='1' type='checkbox'/>
<label class='AT-search-icon' for='AT-Search'><svg class='open' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 2.000000)'><path d='M19.7555474,18.6065254 L16.3181544,15.2458256 L16.3181544,15.2458256 L16.2375905,15.1233001 C16.0877892,14.9741632 15.8829641,14.8901502 15.6691675,14.8901502 C15.4553709,14.8901502 15.2505458,14.9741632 15.1007444,15.1233001 L15.1007444,15.1233001 C12.1794834,17.8033337 7.6781476,17.94901 4.58200492,15.4637171 C1.48586224,12.9784243 0.75566836,8.63336673 2.87568494,5.31016931 C4.99570152,1.9869719 9.30807195,0.716847023 12.9528494,2.34213643 C16.5976268,3.96742583 18.4438102,7.98379036 17.2670181,11.7275931 C17.182269,11.9980548 17.25154,12.2921761 17.4487374,12.4991642 C17.6459348,12.7061524 17.9410995,12.794561 18.223046,12.7310875 C18.5049924,12.667614 18.7308862,12.4619014 18.8156353,12.1914397 L18.8156353,12.1914397 C20.2223941,7.74864367 18.0977423,2.96755391 13.8161172,0.941057725 C9.53449216,-1.08543846 4.38083811,0.250823958 1.68905427,4.08541671 C-1.00272957,7.92000947 -0.424820906,13.1021457 3.0489311,16.2795011 C6.5226831,19.4568565 11.8497823,19.6758854 15.5841278,16.7948982 L18.6276529,19.7705177 C18.9419864,20.0764941 19.4501654,20.0764941 19.764499,19.7705177 C20.0785003,19.4602048 20.0785003,18.9605974 19.764499,18.6502845 L19.764499,18.6502845 L19.7555474,18.6065254 Z' fill='#fff'/></g></svg></label>
<div class='modal__overlay'><label class='search-close' for='AT-Search'>✖</label>
<div class='modal__box'>
<form action='/search' class='full-screen-search' method='get'>
<input class='input' id='searchbox' name='q' placeholder='Search...' type='text'/>
</form>
<div class='Search-tags'>
<span class='tags-label'><b>Popular:</b></span><a class='popular-tag' href='#'>blogger template</a>,
<a class='popular-tag' href='#'>BGMI</a>,
<a class='popular-tag' href='#'>Latest Released</a>
</div>
</div>
</div>
</div>
Step 2) Add CSS:
<style>/* Full Screen Search Box by Anutrickz */ .AT-Search { display: block; padding: 0 1em; text-align: center; width: 100%; } .AT-Search > label.AT-search-icon { position: absolute; top: 14px; right: 0; color: #fff; cursor: pointer; display: block; font-weight: bold; -webkit-transition: all 0.55s; transition: all 0.55s; } .AT-Search > label.AT-search-icon:hover { -webkit-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); } .modal__box { margin: 0 auto; position: relative; left: 50%; padding: 20px; display: flex; flex-direction: column; max-width: 100%; line-height: 30px; border-radius: 5px; transform: translate(-50% , -50%) scale(0.97); overflow: hidden; box-sizing: border-box; top: 50%; } #searchbox { background: 0 0; border: solid #000; border-width: 0 0 1px 0; color: #000; width: 100%; max-width: 70%; font-size: 2rem; background-size: 0% 100%; background-repeat: no-repeat; outline: 0; padding: 2rem 1rem; } .modal__overlay { display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 9999999; transition: all .2s ease;} .modal__overlay:before{content:'';display:block;position:absolute;right:-5px;top:-80px;width:50%;height:1200px;border-top-left-radius:50%;border-bottom-left-radius:50%;background-color:#f1f1f0} input:checked ~ .modal__overlay { transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); display: block; } input:focus + label { -webkit-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); }svg.open{width:20px; height:20px} .full-screen-search{position: relative; font-size: 20px;}#AT-Search{display:none}.modal__overlay .search-close{position: fixed; top: 1.125rem; right: 1.125rem; font-size: 20px; display: inline-block; background: #000; color: #fff; width: 40px; height: 40px; text-align: center; line-height: 2; vertical-align: middle; border-radius: 50%;} .Search-tags{width: 100%; font-size: 14px; color: #000; text-align: center; margin: 0;}.Search-tags span, .Search-tags a { display: inline-block; } .Search-tags a { color: #666; margin: 0 0 0 10px; }</style>
