How to Create an Animated Search Form With CSS

how-to-create-an-animated-search-form-with-css

Animated search forms can enhance the user experience and make the website more engaging.

In this tutorial, we will explore how to create an animated search form using CSS.

We will be creating a simple search form that will transition from a small icon to a full-sized search bar.

HTML Structure

The first step in creating an animated search form is to set up the HTML structure. Here’s what the HTML code for the search form looks like:

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

In this code, we have created a div container with a class of search-container that holds the input field and the search icon.

The input field has a placeholder attribute with a value of “Search”. The search icon is an i tag with two classes, fa and fa-search.

These classes are from the Font Awesome library and are used to display the search icon.

CSS Styles

Now that we have the HTML structure in place, let’s add some CSS styles to make the form look good.

.search-container {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 20px auto;
}

input[type="text"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%%;
  height: 100%%;
  opacity: 0;
}

.fa-search {
  position: absolute;
  font-size: 16px;
  color: #999;
  top: 50%%;
  left: 50%%;
  transform: translate(-50%%, -50%%);
  transition: all 0.3s ease-in-out;
}

In the CSS code, we have set the position property of the search-container class to relative. This is done so that the position of the input field and the fa-search icon can be positioned relative to the search-container.

The width and height properties of the search-container class are set to 36px to make the form small. The margin property is set to 20px auto to center the form horizontally and vertically.

The input[type="text"] selector sets the position property to absolute and sets the top and left properties to 0.

This positions the input field at the top-left corner of the search-container.

The width and height properties are set to 100% to make the input field the same size as the search-container. The opacity property is set to 0 to make the input field invisible.

The fa-search class sets the position property to absolute and the font-size property to 16px. The color property is set to #999 to make the icon gray.

The top and left properties are set to 50% to center the icon horizontally and vertically.

The transform property is set to translate(-50%, -50%) to adjust the position of the icon so that it is centered.

The transition property is set to all 0.3s ease-in-out to add a smooth transition effect when the form expands.

Animations with CSS

The next step is to add some CSS animations to expand the form when the user clicks on the search icon.

.search-container:hover .fa-search,
.search-container .fa-search.active {
  font-size: 20px;
  cursor: pointer;
}

.search-container input[type="text"]:focus + .fa-search {
  width: 100%%;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  font-size: 20px;
}

In the CSS code, we have used the :hover selector to change the font-size of the fa-search icon when the user hovers over the search-container.

The cursor property is set to pointer to indicate that the form is clickable.

The input[type="text"]:focus + .fa-search selector changes the styles of the fa-search icon when the input field is in focus.

The width property is set to 100% to make the icon span the entire width of the search-container.

The padding property is set to 10px to add some padding around the icon. The background-color property is set to #fff to make the background white.

The border-radius property is set to 5px to give the form rounded corners. The color property is set to #000 to make the icon black. The font-size property is set to 20px to make the icon larger.

JavaScript Functionality

Finally, we will add some JavaScript to toggle the active class on the fa-search icon when the user clicks on it. This will trigger the CSS animations and expand the form.

const searchContainer = document.querySelector('.search-container');
const searchIcon = document.querySelector('.fa-search');

searchContainer.addEventListener('click', function () {
  searchIcon.classList.toggle('active');
});

In the JavaScript code, we have used the querySelector method to select the search-container and the fa-search elements.

The addEventListener method is used to listen for a click event on the search-container. The toggle method is used to toggle the active class on the fa-search icon.

Conclusion

That’s it! We have successfully created an animated search form using CSS and JavaScript.

This form is easy to customize and can be used on any website. The key to creating this form is to use CSS transitions and animations to make the form look and feel smooth.

Try playing around with the CSS styles to see how you can make the form look even better.

Tags

Related Posts