Expanding Search Bar Using HTML CSS

Expanding Search Bar Using HTML CSS (Code + Demo)

Expanding Search Bar Using HTML CSS

 

In this tutorial, you will learn how to make Expanding Search Bar. Earlier I discussed many types of search bars. This search box is simple but smart. Only HTML and CSS are used here.

This is a CSS Expandable Search Box. Under normal circumstances, the full search bar cannot be found. An icon will be found instead. When you click on that icon, the entire search bar will be expanded.

This type of Expanding Search Bar is now used on almost all websites. This type of bar can be made in many ways. In some cases, the bar can be seen by clicking on the icon. In some cases, it can be seen only by hovering.

CSS expanding search bar

The design used here is quite simple. If you hover over the icon, you will see the complete search bar. Below is a preview from which you can learn how the expandable search bar works.

 

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

 

 

 

As you can see above, a white box has been created on the webpage. There is an icon in that box. If you click on that button, you will see the complete search bar.

How to create an expanding search bar

If you want to download all the code to make it, use the button at the bottom of the article. Although I gave all the code below. Create HTML, and CSS files to copy and use the code.

#HTML Code (index.html)

The following code is HTML. Copy these codes and add them to your HTML file.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Document</title>
  <!–icon style link–>
  <link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”>
  <!–CSS file–>
  <link rel=“stylesheet” href=“style.css”>
</head>
<body>
 
<div class=“wrapper c-height”>
  <div class=“search-area c-height”>
    <div class=“single-search”>
      <input class=“custom-input” type=“text” name=“” placeholder=“What are you looking for …”>
      <a href=“#” class=“icon-area”><i class=“fa fa-search”></i></a>
    </div>
  </div>
</div>
</body>
</html>

#CSS Code (style.css)

The following code is CSS. Copy these codes and add them to your CSS file. Be sure to use the rename style.css of your CSS file.

Here inside our css file using the body tag selector we will set the width and height of the body as 100% and using the background color property we will set the background as “black”.

Using the class selector (single-search) we will set the border radius as 30px and using the margin bottom property we will set the bottom margin to  our search button of 30px

Then using the hover property to our button we will use the transform property to scale to expande the length of the search bar on hover.

 /* basic webpage design */
  body,html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #262626;
  }
/* search button */
  .single-search {
    border-radius: 30px;
    padding: 10px;
    margin-bottom: auto;
    margin-top: auto;
    height: 40px;
    background-color: white;
  }
  .search-area{
    display: flex;
    justify-content: center;
  }
  .c-height {
    height: 100%;
  }
/* input box*/
  .custom-input{
    border: 0;
    outline: 0;
    width: 0;
    line-height: 40px;
    transition: width 0.4s linear;
  }
  input::placeholder {
    color: #262626;
    font-size: 19px;
  }
  input{
  font-size: 20px;
  }
  /* active search bar */
  .single-search:hover > .custom-input{
    padding: 0 10px;
    width: 400px;
    caret-color:#262626;
    transition: width 0.4s linear;
  }
  .single-search:hover > .icon-area{
    background: white;
    color: #262626;
  }
/* search icon */
  .icon-area {
    height: 40px;
    width: 40px;
    float: right;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    display: flex;
    text-decoration: none;
    color: #262626;
  }
.fa-search{
  font-size: 20px;
}

 

Conclusion:

If you have difficulty copying your code, use the download button below. If you have any problems with this CSS Expanding Search Bar, please comment.