How To Create a Search Bar

A search bar also known as a search field or search box is an integral part of modern websites where the user might use the search as a primary mode of discovering content on the site as opposed to fiddling with the navigation menu.

1. Code html

   <div class="blog">
     <input type="text" placeholder="Search keyword ...">
     <div class="search"></div>
   </div>

2. Code Css

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   .blog {
     position: absolute;
     margin: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 300px;
     height: 100px;
     .search {
       position: absolute;
       margin: auto;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       width: 80px;
       height: 80px;
       background: crimson;
       border-radius: 50%;
       transition: all 1s;
       z-index: 4;
       box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
       &:hover {
         cursor: pointer;
       }
       &::before {
         content: "";
         position: absolute;
         margin: auto;
         top: 22px;
         right: 0;
         bottom: 0;
         left: 22px;
         width: 12px;
         height: 2px;
         background: white;
         transform: rotate(45deg);
         transition: all .5s;
       }
       &::after {
         content: "";
         position: absolute;
         margin: auto;
         top: -5px;
         right: 0;
         bottom: 0;
         left: -5px;
         width: 25px;
         height: 25px;
         border-radius: 50%;
         border: 2px solid white;
         transition: all .5s;
       }
     }
     input {
       font-family: 'Inconsolata', monospace;
       position: absolute;
       margin: auto;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       width: 50px;
       height: 50px;
       outline: none;
       border: none;
       background: crimson;
       color: white;
       text-shadow: 0 0 10px crimson;
       padding: 0 80px 0 20px;
       border-radius: 30px;
       box-shadow: 0 0 25px 0 crimson,
                   0 20px 25px 0 rgba(0, 0, 0, 0.2);
      
       transition: all 1s;
       opacity: 0;
       z-index: 5;
       font-weight: bolder;
       letter-spacing: 0.1em;
       &:hover {
         cursor: pointer;
       }
       &:focus {
         width: 300px;
         opacity: 1;
         cursor: text;
       }
       &:focus ~ .search {
         right: -250px;
         background: #151515;
         z-index: 6;
         &::before {
           top: 0;
           left: 0;
           width: 25px;
         }
         &::after {
           top: 0;
           left: 0;
           width: 25px;
           height: 2px;
           border: none;
           background: white;
           border-radius: 0%;
           transform: rotate(-45deg);
         }
       }
       &::placeholder {
         color: white;
         opacity: 0.5;
         font-weight: bolder;
       }
     }
   }