Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Full screen Search bar using CSS and JavaScript

  • Last Updated : 23 Feb, 2021

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. 

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!

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=
    </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 Seachbox <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"
})

Output :




My Personal Notes arrow_drop_up
Recommended Articles
Page :