Skip to main content

Creating a simple search bar using HTML and CSS

Hello there! Today we will be covering one of the most basic, yet essential things on most websites and blogs: A search bar. A search bar helps clients to navigate through the website rather than typing the URL in the browser, thereby avoiding the crumblesome process. In this post, we will be creating a simple and minimalistic search bar using basic HTML and CSS

Here is what we will be doing:




Here is the YouTube tutorial:


So let's get started!

Step 0 - Prerequisites

Since this is a simple tutorial, not much is expected from you, except for basic HTML and CSS. We will be using font awesome library for the search icon. If you are not interested in external libraries, you can just insert a search image and style it accordingly.

Step 1 - Initialize

Just basic html tags and loading the font awesome library

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 <head>
  <title>Simple search bar</title>

  <!-- Font awesome library for search icon -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>


Step 2 - Structure

Here we will be creating the markup for the search bar. Just paste the following lines of code in the body tag: 

1
2
3
4
<div class="container">
  <input type="text" class="search" placeholder="Search"/>
  <button class="searchBtn"><i class="fa fa-search"></i></button>
</div>

Explanation:

This creates the parent tag with class container. It contains the text input and search button with a search icon. We will be styling them in the upcoming steps.



Step 3 - Styling

Now we will style the parent tags to avoid the unwanted scrollbar. Just paste the following code in the style tag: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
 }

 .container {
  width: 20%;
  float: right;
  margin: 3%;
  padding: 0%;
  box-shadow: 3px 3px 5px #3ec397;
 }


Step 4- Search bar styling

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 .search {
  width: 80%;
  float: left;
  margin: 0;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #3ec397;
  padding: 3%;
 }

 .searchBtn {
  width: 20%;
  float: left;
  margin: 0;
  height: 50px;
  box-sizing: border-box;
  border: 0;
  background-color: #3ec397;
  color: white;
 }

Explanation:

Now the above code gives a width of 80% to the search input and width of 20% to the button. We use float left to position the elements properly. The rest are just basic self-explanatory tags.

Note: CSS gives different heights to input type text and button though they are in the same height. Hence, we use box-sizing: border-box to solve this.

Hope this tutorial helped you. If you want other CSS/HTML/JS/JQuery/PHP/Vue tutorials, drop a comment and I will look into it.



Final 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
<!DOCTYPE html>
<html>
  <head>
    <title>Simple search bar</title>

    <!-- Font awesome library for search icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>

    <!-- Custom styling -->
    <style>

      html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }

      .container {
        width: 20%;
        float: right;
        margin: 3%;
        padding: 0%;
        box-shadow: 3px 3px 5px #3ec397;
      }

      .search {
        width: 80%;
        float: left;
        margin: 0;
        height: 50px;
        box-sizing: border-box;
        border: 1px solid #3ec397;
        padding: 3%;
      }

      .searchBtn {
        width: 20%;
        float: left;
        margin: 0;
        height: 50px;
        box-sizing: border-box;
        border: 0;
        background-color: #3ec397;
        color: white;

      }

    </style>
  </head>
  <body>

    <!-- Deesan Tutorials -->

    <div class="container">
      <input type="text" class="search" placeholder="Search"/>
      <button class="searchBtn"><i class="fa fa-search"></i></button>
    </div>

  </body>
</html>

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Center element horizontally and vertically to center of screen using plain CSS - Deesan Tutorials

Hello there!!! In this post you will learn the solution to one of the most sought after problems for web designers: Centering a div both horizontally, and vertically Here is the end result: Here is the youtube tutorial: So let's get our hands to work Step 1: Initialize So this is just the basic stuff of every HTML page: DOCTYPE, html, head and body tags. Just fire up your code editor and paste the following code: 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title> Center element </title> <style> </style> </head> <body> </body> </html> This just creates an empty HTML document Step 2: Elements So, for this tutorial, we are just creating a parent div with a child div in it which we will center shortly. For now, enter the following code in the body tag: 1 2 3 4 5 <div class= "parent" > <div class= "child" > </div> </div> Th...
Post a Comment
Read more