Search Bar

Introduction

Here you will see today a normal search box with search icon to search after writing in search bar. We will make it throw HTML and CSS only.This is gonna be easy to understand by every developer, u just need to follow us carefully step by step.

Now without wasting time lets make it together with HTML and CSS with easy steps. You can do practice by making like this type of search and can make it designing according to you.

HTML

Fisrt we will create the structure of search bar with icon in HTML page. In html page first we will make a input box with input tag with placeholder name “search” and then we will add the search logo you can add this by searching font-awesome on google then go to website and search the “search icon”, copy the code link and then paste it in the
html code.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Search Bar</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css'><link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<form class="search">
  <input type="text" placeholder="Search" class="search__input" />
  <button type="button" class="search__button">
    <i class="ri-search-2-line"></i>
  </button>
</form>

  
</body>
</html>

CSS

After creating the structure of search bar with logo now its time to give it styling with CSS(an external stylesheet attached with html page).In css we will make the background black and search logo & seach box mix color background with white text.We will hide the search bar and when user click on the search icon then search bar will show with animation.

// style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
  }
  body {
    font-family: "Poppins", sans-serif;
    background-color: #000000;
    color: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  
  .search {
    display: inline-flex;
    align-items: center;
    background-image: linear-gradient(40deg, #2c2b2b, #36c229);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #fff;
  }
  .search :is(input, button) {
    background: transparent;
    color: inherit;
    border: none;
    outline: none;
  }
  .search__input {
    width: 0;
    transition: width 0.5s;
  }
  .search__button {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition: color 0.25s;
  }
  .search__button:hover {
    color: #e3e3e3;
  }
  .search:focus-within input {
    width: 200px;
  }
  ::placeholder {
    font: inherit;
    color: #e3e3e3;
  }

Finally, we made the Seach bar with logo with the help of HTML and CSS step by step.You can add this search box in your website or in your project.You can make changes according to you in this code for practice.

If you want to see output of the code , then click on the Like .

Press the download button to download the source code

1 KB