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

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.
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>    <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 boxfunction openSearch() {  document.getElementById("myOverlay").style.display = "block";}  // Close the full screen search boxfunction closeSearch() {  document.getElementById("myOverlay").style.display = "none";}
Output: This output is occured when you will combine above three code sections.
CSS-Basics
HTML-Basics
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?