Full screen Search bar using CSS and JavaScript
In this article, we will create a full-screen search bar using CSS and JavaScript. We create a button and on clicking the button we will show the search bar.
Approach :
- Create a button and use JavaScript to make the search panel able to toggle.
- Now take a div and set its position fixed and top, bottom, left, right properties to zero so that the search bar becomes fixed (non – scrollable) and full screen.
- Set its opacity to something less than 1 and greater than 0 and the background color set to black to make its style cool.
- Add an input box and an icon button to close the search bar.
Implementation :
HTML
<!DOCTYPE html> < html > < head > < script src = "https://kit.fontawesome.com/2961dbb4cf.js" crossorigin = "anonymous" > </ script > < style > .myBtn{ height: 42px; width: 183px; font-size: 15px; background: rebeccapurple; color: white; font-weight: bold; border-radius: 36px; border: none; cursor: pointer; outline: none; box-shadow: 3px 3px 18px 0px #b9b9b9; transition: 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .myBtn:hover{ color: black; background-color: white } .myBtn i{ margin-left: 8px } .fullScreen{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000d4; display: none } .inputBox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 2px; border-radius: 3px; box-shadow : inset 0 0.25rem 0.125rem 0 rgb(0 0 0 / 5%); display: flex; } .inputBox input{ height: 45px; width: 270px; border: none; outline: none; font-size: 19px; color: #4a4a4a; padding-left: 15px } .inputBox button{ border: none; background-color: transparent; vertical-align: middle; cursor: pointer; transition: 0.5s } .inputBox button:hover{ transform: rotate(360deg); } .inputBox button i{ font-size: 30px } .closeBtn{ height: 30px; width: 30px; background-color: white; border-radius: 16px; position: absolute; top: 62px; right: 42px; display: flex; justify-content: center; align-items: center; cursor: pointer; } </ style > </ head > < body > < button class = "myBtn" >Show Searchbox < span > < i class = "fas fa-search" ></ i > </ span ></ button > < div class = "fullScreen" > < div class = "inputBox" > < input type = "text" placeholder = "Search here..." > < button type = "submit" > < i class = "fas fa-arrow-right" ></ i > </ button > </ div > < div class = "closeBtn" > < i class = "fa fa-close" ></ i > </ div > </ div > < script src = "index.js" ></ script > </ body > </ html > |
Javascript
const btn = document.querySelector( ".myBtn" ) const searchBox = document.querySelector( ".fullScreen" ) const closeBtn = document.querySelector( ".closeBtn" ) closeBtn.addEventListener( "click" , ()=>{ searchBox.style.display = "none" }) btn.addEventListener( 'click' , ()=>{ searchBox.style.display = "block" }) |
Contact Us