Open In App

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

Last Updated : 13 Jun, 2022
Like Article

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:


<!DOCTYPE html>
    <script src="main.js"></script>
    <div id="myOverlay" class="overlay">
      <span class="closebtn" 
            title="Close Overlay">
      <div class="overlay-content">
        <form action="/action_page.php">
          <input type="text" 
                 name="search" />
          <button type="submit">
            <i class="fa fa-search"></i>
      Full Screen Search Bar 
    <button class="openBtn" 
            Open Search Box

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. 


* {
  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.


// 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.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads