Custom Search Box

Submit By webmaster 7 months ago in html category
Tags: searchforms
A pure HTML, CSS search box. Custom code no need to add bootstrap or another CSS framework. You can download the code or play with the code here.
Preview HTML CSS JavaScript Resources
<div class="search-box"> <input type="text" placeholder="Type to search..."> <button class="search-icon"> <i class="fas fa-search"></i> </button> </div>
@import url('https://fonts.googleapis.com/css2?family=Sen:[email protected];700;800&display=swap'); body { font-family: 'Sen', sans-serif; background: #e3f2fd; } .search-box { position: relative; height: 60px; width: 350px; border-radius: 50%; box-shadow: 5px 5px 30px rgb(0 0 0 / 20%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); margin: 100px auto 0; } .search-box input{ width: 100%; height: 100%; border: none; border-radius: 50px; background: #fff; outline: none; padding: 0 60px 0 20px; font-size: 18px; box-sizing: border-box; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .search-box .search-icon { position: absolute; top: 50%; right: 8px; height: 50px; line-height: 50px; width: 50px; font-size: 20px; background: #664AFF; color: #fff; border: 0; border-radius: 100%; cursor: pointer; transform: translateY(-50%) rotate(360deg); }
FontAwesome = 5.15.4

Download Custom Search Box snippet code.

This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project. You can modify the above editor code and see the live update. You can also download the modify code. Feel free to play with Custom Search Box snippet code. If you like it then don't forget to share this code with your friends.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet