loader

Build a Simple and Effective Search Bar using Html, CSS and JQuery.

  • First We Will Write Some Html Code.
  • Then we will add some Styling using CSS.
  • Finally we will add some Functionailty.

Step 1: Add Html Code

<div class="container">
  <div class="wrapper">
    <div class="search-box">
      <input type="text" placeholder="Search now" id="search-input" >
      <button class="search-icon"><i class="fas fa-search"></i></button>
    </div>
   </div>
</div>

Step 2: Add CSS

This Gives Your Interface some Styling

*{
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
body{
    width: 100%;
    overflow: hidden;
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 100vh;
}
.container{
    position: relative;
    height: 100vh;
}
.wrapper{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translatex(-50%)translateY(-50%);
}
.search-box{
    position: relative;
    display: flex;
}
#search-input{
    padding: 10px;
    border-radius: 50px ;
    background: transparent;
    width: 0;
    font-size: 1.9em;
    border: none;
}
.search-icon{
    position: absolute;
    transform: translate(-50%,-50%);
    right: -25px;
    top:25px;
    background: yellow;
    border: none;
    margin: 6px;
    cursor: pointer;
    border-radius: 50%;
    padding: 15px;
}
.search-icon i {
    font-size: 20px;
    color:white;
}
#search-input.active {
    width: 400px;
    animation: linear 3s right;
    transition: ease-in 0.8s;
    border: 4px solid white;
    padding-left: 15px;
  }

Step 3: Add Some Functionality Using JavaScript or JQuery

In this case, I am using Jquery as it is a small and lightweight JavaScript library.

function searchbox(){
$(".search-icon").click(function(){
    $("#search-input").toggleClass("active").focus;
    $("#search-input").val("");
  });
}
$(document).ready(function(){
    searchbox();
});

Finally:

Your Final code and Output Would be Like This

See the Pen Simple Search Bar by jatin chawda (@jatinchawda1503) on CodePen.

You can Also View the Documentation in Github : View Here

Leave a Reply