Hey coders, and welcome to another blog post. Today we will see the SOURCE CODE of this project and also on how this project works.

In simple terms, this search box works when the checkbox is clicked. We styled the checkbox to look like a button too. Then it opens widely into a search bar and the user can type what they want to search. Then when the search button is clicked, the search bar closes. To make this function, you can change the <form action="#"> of this search bar to your action page.

And that's all for this project. If you had trouble understanding,
  • Do watch my video tutorial below
  • Download the source code files below as I also added comments for all components of the code
Till then, goodbyee!

HTML Code: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Responsive Search Bar using Pure CSS | CodingPorium</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="box">
    <input type="checkbox" id="check">
    <div class="search-box">
      <input type="text" placeholder="What would you like to search...">
      <label for="check" class="icon">
        <i class="fas fa-search"></i>
      </label>
    </div>
  </div>

</body>
</html>


CSS Code: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: #0d9e81;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box{
  max-width: 400px;
  width: 100%;

}
.box .search-box{
  position: relative;
  height: 50px;
  max-width: 50px;
  margin: auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  transition: all 0.3s ease;
}
/*Opens the search bar when clicked*/
#check:checked ~ .search-box{
  max-width: 380px;
}
.search-box input{
 position: absolute;
 height: 100%;
 width: 100%;
 border-radius: 25px;
 background: #fff;
 outline: none;
 border: none;
 padding-left: 20px;
 font-size: 18px;
}
.search-box .icon{
  position: absolute;
  right: -2px;
  top: 0;
  width: 50px;
  background: #FFF;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #0d9e81;
  font-size: 20px;
  border-radius: 25px;
}
#check:checked ~ .search-box .icon{
  background: #0d9e81;
  color: #FFF;
  width: 60px;
  border-radius: 0 25px 25px 0;
}
/*Remove default behavior of checkbox*/
#check{
  display: none;
}
Tags

2 Comments

  1. CodingPoriumJuly 30, 2021 at 2:14 AM

    How is our new logo? Do let us know your comments😁

    ReplyDelete
  2. Moses Fahmi PratamaOctober 15, 2021 at 2:42 AM

    Cool tutorial brother

    View in my web blog too in https://staykoding.xyz

    ReplyDelete

Post a Comment

Previous Post Next Post