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. 

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 :


<!DOCTYPE html>
    <script src=
      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%);
          color: black;
          background-color: white
      .myBtn i{
          margin-left: 8px
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #000000d4;
          display: none
          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
          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;
    <button class="myBtn">Show Seachbox <span>
        <i class="fas fa-search"></i>
    <div class="fullScreen">
        <div class="inputBox">
            <input type="text" 
                   placeholder="Search here...">
            <button type="submit">
              <i class="fas fa-arrow-right"></i>
        <div class="closeBtn">
          <i class="fa fa-close"></i>
    <script src="index.js"></script>


const btn =
const searchBox =
const closeBtn = 
closeBtn.addEventListener("click", ()=>{ = "none"
btn.addEventListener('click', ()=>{ = "block"

Output :

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!