Expandable search bar different searching method using your website. click to the search icon show expandable search space. This concept very useful on your website. only using simple html and css coding and javascript coding also.
See the code and see the demo video download the code:
Html code for search bar:
<section>
<div class="search">
<div class="icon"></div>
<div class="input">
<input type="text" placeholder="Search..." id="mysearch">
</div>
<span class="clear" onclick="document.getElementById('mysearch').value = ''"></span>
</div>
</section>
Css code for search bar:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
min-height: 100vh;
background: #297eff;
align-items: center;
justify-content: center;
}
.search {
width: 60px;
height: 60px;
transform: 0.5s;
background: #fff;
overflow: hidden;
position: relative;
border-radius: 60px;
box-shadow: 0 0 0 0 5px #2573ef;
}
.search.active {
width: 360px;
}
.search .icon {
top: 0;
left: 0;
width: 60px;
height: 60px;
display: flex;
z-index: 1000;
cursor: pointer;
position: absolute;
background: #fff;
border-radius: 60px;
align-items: center;
justify-content: center;
}
.search .icon:before {
content: "";
width: 15px;
height: 15px;
position: absolute;
border-radius: 50%;
border: 3px solid #287dfc;
transform: translate(-4px, -4px);
}
.search .icon:after {
content: "";
width: 3px;
height: 12px;
position: absolute;
background: #287dfc;
transform: translate(6px, 6px) rotate(315deg);
}
.search .input {
left: 60px;
width: 300px;
height: 60px;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.search .input input {
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 18px;
padding: 10px 0;
position: absolute;
}
.clear {
top: 50%;
right: 15px;
width: 15px;
height: 15px;
display: flex;
cursor: pointer;
background: #ff0;
position: relative;
align-items: center;
justify-content: center;
transform: translateY(-50%);
}
.clear:before {
width: 1px;
height: 15px;
content: "";
position: absolute;
background: #999;
transform: rotate(45deg);
}
.clear:after {
width: 1px;
height: 15px;
content: "";
position: absolute;
background: #999;
transform: rotate(315deg);
}
Javascript code for search bar:
const icon = document.querySelector(".icon");
const search = document.querySelector(".search");
icon.onclick = function () {
search.classList.toggle("active");
};
0 Comments