Full screen Search bar using CSS and JavaScript

Last Updated : 28 Nov, 2022

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"
})