Animated Search Bar Code | Stylish Search Box In Html Css Code

 <form action="" class="search-bar">  
      <input autocomplete="off" type="search" name="search" pattern=".*S.*" required>  
      <button class="search-btn" type="submit">  
           <span>Search</span>  
      </button>  
 </form>  

There is all HTML code for the Animated Search Bar. Now, you can see output without CSS, then we write CSS for the Animated Search Bar.

Output

CSS code

 * {  
      border: 0;  
      box-sizing: border-box;  
      margin: 0;  
      padding: 0;  
 }  
 :root {  
      font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1920 - 320));  
 }  
 body, button, input {  
      font: 1em Hind, sans-serif;  
      line-height: 1.5em;  
 }  
 body, input {  
      color: #171717;  
 }  
 body, .search-bar {  
      display: flex;  
 }  
 body {  
      background: #f1f1f1;  
      height: 100vh;  
 }  
 .search-bar input,  
 .search-btn,   
 .search-btn:before,   
 .search-btn:after {  
      transition: all 0.25s ease-out;  
 }  
 .search-bar input,  
 .search-btn {  
      width: 3em;  
      height: 3em;  
 }  
 .search-bar input:invalid:not(:focus),  
 .search-btn {  
      cursor: pointer;  
 }  
 .search-bar,  
 .search-bar input:focus,  
 .search-bar input:valid {  
      width: 100%;  
 }  
 .search-bar input:focus,  
 .search-bar input:not(:focus) + .search-btn:focus {  
      outline: transparent;  
 }  
 .search-bar {  
      margin: auto;  
      padding: 1.5em;  
      justify-content: center;  
      max-width: 30em;  
 }  
 .search-bar input {  
      background: transparent;  
      border-radius: 1.5em;  
      box-shadow: 0 0 0 0.4em #171717 inset;  
      padding: 0.75em;  
      transform: translate(0.5em,0.5em) scale(0.5);  
      transform-origin: 100% 0;  
      -webkit-appearance: none;  
      -moz-appearance: none;  
      appearance: none;  
 }  
 .search-bar input::-webkit-search-decoration {  
      -webkit-appearance: none;  
 }  
 .search-bar input:focus,  
 .search-bar input:valid {  
      background: #fff;  
      border-radius: 0.375em 0 0 0.375em;  
      box-shadow: 0 0 0 0.1em #d9d9d9 inset;  
      transform: scale(1);  
 }  
 .search-btn {  
      background: #171717;  
      border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;  
      padding: 0.75em;  
      position: relative;  
      transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);  
      transform-origin: 0 50%;  
 }  
 .search-btn:before,   
 .search-btn:after {  
      content: "";  
      display: block;  
      opacity: 0;  
      position: absolute;  
 }  
 .search-btn:before {  
      border-radius: 50%;  
      box-shadow: 0 0 0 0.2em #f1f1f1 inset;  
      top: 0.75em;  
      left: 0.75em;  
      width: 1.2em;  
      height: 1.2em;  
 }  
 .search-btn:after {  
      background: #f1f1f1;  
      border-radius: 0 0.25em 0.25em 0;  
      top: 51%;  
      left: 51%;  
      width: 0.75em;  
      height: 0.25em;  
      transform: translate(0.2em,0) rotate(45deg);  
      transform-origin: 0 50%;  
 }  
 .search-btn span {  
      display: inline-block;  
      overflow: hidden;  
      width: 1px;  
      height: 1px;  
 }  
 /* Active state */  
 .search-bar input:focus + .search-btn,  
 .search-bar input:valid + .search-btn {  
      background: #2762f3;  
      border-radius: 0 0.375em 0.375em 0;  
      transform: scale(1);  
 }  
 .search-bar input:focus + .search-btn:before,   
 .search-bar input:focus + .search-btn:after,  
 .search-bar input:valid + .search-btn:before,   
 .search-bar input:valid + .search-btn:after {  
      opacity: 1;  
 }  
 .search-bar input:focus + .search-btn:hover,  
 .search-bar input:valid + .search-btn:hover,  
 .search-bar input:valid:not(:focus) + .search-btn:focus {  
      background: #0c48db;  
 }  
 .search-bar input:focus + .search-btn:active,  
 .search-bar input:valid + .search-btn:active {  
      transform: translateY(1px);  
 }  
 @media screen and (prefers-color-scheme: dark) {  
      body, input {  
           color: #f1f1f1;  
      }  
      body {  
           background: #171717;  
      }  
      .search-bar input {  
           box-shadow: 0 0 0 0.4em #f1f1f1 inset;  
      }  
      .search-bar input:focus,  
      .search-bar input:valid {  
           background: #3d3d3d;  
           box-shadow: 0 0 0 0.1em #3d3d3d inset;  
      }  
      .search-btn {  
           background: #f1f1f1;  
      }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Now we have completed our CSS section,  Here is our updated output with CSS. Hope you like the Animated Search Bar, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create an Animated Search Bar using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Jon Kantner

Check out more…..

1. How to design HTML Loader using HTML CSS JAVASCRIPT

2. Simple CSS loaders | 8+ Easy Css loaders with only Html 

3. Circular Progress Bar using HTML,CSS and Javascript – Codewithrandom