Open In App

How to create fullscreen search bar using HTML , CSS and JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, you will learn how to create a full-screen search Bar. Here You will be required to create two divs. One for the overlay container and the other for the overlay content container.

HTML Code: The first step is to create an HTML file. Here we will create the basic structure for the search bar. Here we will also use an icon for the search bar for that we will use the font awesome icon.

Fontawesome Icon CDN Link:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

index.html




<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href=
    <link
      rel="stylesheet"
      href="style.css"/>
    <script src="main.js"></script>
      
  </head>
  <body>
    <div id="myOverlay" class="overlay">
      <span class="closebtn" 
            onclick="closeSearch()"
            title="Close Overlay">
            Ã—
      </span>
      <div class="overlay-content">
        <form action="/action_page.php">
          <input type="text" 
                 placeholder="Search.." 
                 name="search" />
          <button type="submit">
            <i class="fa fa-search"></i>
          </button>
        </form>
      </div>
    </div>
  
    <h2>GeeksforGeeks</h2>
    <h2>
      Full Screen Search Bar 
    </h2>
    <button class="openBtn" 
            onclick="openSearch()">
            Open Search Box
    </button>
  </body>
</html>


CSS Code: Add CSS to the file. We use CSS to give a transition effect and for the design of the search bar. It also used to align the element in the right position. 

style.css




* {
  box-sizing: border-box;
}
  
.openBtn {
  background-color: dodgerblue;
  border: 2px solid-black;
  border-radius: 25px;
  padding: 10px 15px;
  font-size: 40px;
  cursor: pointer;
}
  
.openBtn:hover {
  background: green;
}
  
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}
  
.overlay-content {
  position: relative;
  top: 50%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}
  
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 80px;
  cursor: pointer;
  color: white;
}
  
.overlay .closebtn:hover {
  color: blue;
}
  
.overlay input[type="text"] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}
  
.overlay input[type="text"]:hover {
  background: #f1f1f1;
}
  
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: dodger-blue;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
  
.overlay button:hover {
  background: #bbb;
}


JavaScript Code: Use JavaScript to turn on and off the overlay/full-screen effect.

main.js




// Open the full screen search box
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}
  
// Close the full screen search box
function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}


Output: This output is occurred when you will combine above three code sections.



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads