Custom Search Box
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:wght@400;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.
Download Snippet
Free code snippet playground
Let's share the example by using HTML, CSS, JavaScript and Bootstrap.
Add New Snippet