Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 18 Mar, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 occured when you will combine above three code sections.




My Personal Notes arrow_drop_up
Recommended Articles
Page :