How to Create an Expanding Search Input with HTML, CSS, and JavaScript

As a designer, you’ll be able to improve the consumer expertise of an internet site or cell software by including delicate animations to its parts. One such element is a search enter field. This tutorial will cowl the best way to create an increasing search enter; one which expands when a consumer clicks on a search icon.

You’ll discover this type of increasing search enter impact if ever you utilize Youtube within the browser:

screenshot of the youtube expanding search inputscreenshot of the youtube expanding search inputscreenshot of the youtube expanding search input

HTML Construction

The HTML Construction can be only a easy div containing an enter component and a button.

1
<div class="search-wrapper">
2
  <enter kind="search" placeholder="Search" />
3
  <button class="search-btn">
4
    <i id="search-icon" class="fa-solid fa-magnifying-glass"></i>
5
  </button>
6
</div>

You’ll discover that is an enter with a sort of search, not textual content. There’s no actual distinction between the 2, however search is semantically appropriate in our case.

<input> parts of kind search are textual content fields designed for the consumer to enter search queries into. These are functionally similar to textual content inputs, however could also be styled otherwise by the consumer agent.” — mdn

Styling With CSS

The very first thing we wish to do is to middle every thing utilizing Flexbox. Apply the next types to the physique.

1
physique {
2
    show: flex;
3
    align-items: middle;
4
    justify-content: middle;
5
    background-color: grey;
6
    min-height: 100vh;
7
}

Subsequent, we’ll model the complete search enter and later we’ll work on the increasing characteristic. For the wrapper component, add an top, width, border, border-radius and a background .

1
.search-wrapper {
2
  width: 50px;
3
  top: 50px;
4
  show: flex;
5
  border-radius: 4rem;
6
  background: #fff;
7
  align-items: middle;
8
  justify-content: middle;
9
  define: none;
10
  border: 2px stable #888;
11
  
12
}

We have now additionally added the model show: flex to the wrapper div component in order that the kid parts .i.e. enter and button will even be centered. For the enter component, set border:none, and define:none. We additionally need it to have a full width and top. Set a margin-left:20px to the placeholder textual content and a few padding.

1
.search-wrapper enter {
2
  width: 100%;
3
  top: 100%;
4
  padding: 10px;
5
  margin-left: 20px;
6
  define: none;
7
  border: none;
8
  font-size: 1.5rem;
9

10
}

To make the icon seen, set a background coloration to the button. Around the button with border-radius:50%, and place it to the best of the wrapper component by setting margin-left: auto . The types will seem like this:

1
.search-btn {
2
  font-size: 2rem;
3
  border-radius: 50%;
4
  padding: 10px;
5
  border: 2px stable white;
6
  width: 60px;
7
  cursor: pointer;
8
  top: 60px;
9
  background: #e66610;
10
  margin-left: auto;
11
}

Increasing Function

Now that the whole search enter is full, we are able to work on the develop characteristic. The very first thing we wish to do is scale back the width of the wrapper component.  

1
.search-wrapper {
2
  width: 60px;
3
  top: 60px;
4
  show: flex;
5
  border-radius: 4rem;
6
  background: white;
7
  align-items: middle;
8
  justify-content: middle;
9
  border-radius: 100px;
10
  define: none;
11
 
12

13
}

Subsequent, Set place:relative to the wrapper div component and place:absolute to the enter component; It will be certain that the enter’s place is relative to the father or mother component fairly than the physique.

1
.search-wrapper {
2
  /* the remainder of the CSS */
3
  place: relative;
4
}
5

6

7
.search-wrapper enter {
8
  place: absolute;
9
  high: 0;
10
  left: 0;
11
  /* the remainder of the CSS */
12
}

Now we’ve got one thing like this.

round input textround input textround input text

As you’ll be able to see, we nonetheless want extra CSS.

Let’s make the button float on high of the enter by setting z-index:1 to the button. 

1
.search-btn {
2
  font-size: 2rem;
3
  border-radius: 50%;
4
  padding: 10px;
5
  border: 1px stable #be0671;
6
  width: 60px;
7
  cursor: pointer;
8
  top: 60px;
9
  background: #be0671;
10
  margin-left: auto;
11
  z-index: 1;  
12

13
}

The ultimate model is to cover any overflow by setting overflow: hidden on the wrapper div component.

1
.search-wrapper {
2
  /* remainder of the CSS */
3
  overflow: hidden;
4
 
5
}

JavaScript Performance

The JavaScript performance will develop the wrapper component to full width once you hover with a mouse and scale back the width in the event you take away the mouse. Let’s first outline the CSS class for rising the width.

1
.lively {
2
  width: 350px;
3
}

Choose the wrapper div component 

1
 const search = doc.querySelector(".search-wrapper");

Subsequent, add two occasion listeners, mouseover and mouseout. On mouseover, we’ll add the lively CSS model; on mouseout, we’ll take away the CSS model.

1
search.addEventListener("mouseover", () => {
2
  if (!search.classList.comprises("lively")) {
3
    search.classList.add("lively");
4
  }
5
});
6

7
search.addEventListener("mouseout", () => {
8
  if (search.classList.comprises("lively")) {
9
    search.classList.take away("lively");
10
  }
11
});

Animation

The ultimate step is so as to add a transition impact to make the transition impact easy. 

1
.search-wrapper {
2
  /* the remainder of the CSS */
3
  transition: 400ms ease-in-out;
4

5
}

You’ll be able to mess around with the transition values to realize the specified really feel. That’s it for this tutorial; take a look at the CodePen under. 

Conclusion

This tutorial has lined creating an increasing search bar that features animations to enhance interactivity. Incorporating transitions in your design is crucial to make the consumer interface extra participating and gratifying.

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0