LAST UPDATED: AUGUST 5, 2021
How to create an animated search form with CSS?
The search form is added to any website so that users can search for their queries. We can customize and provide styling to our search form using CSS. We can also animate the search field by applying CSS animation properties. Let's move forward and learn how to animate the CSS search form.
Creating an animated search form
The CSS transition property can be used to animate the search form. It adds the time interval for the animation. Also, a CSS :focus selector can be used to customized the search form. Here, we will change the width of the search to 100% when the search form is on focus.
Example: Creating an animated search form
In this example, we have initially added a smaller-width search form but when we click on the search form expands.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="style.css">
<style>
input[type=text] {
width: 150px;
box-sizing: border-box;
border: 2px solid blue;
font-size: 16px;
background-color: white;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.6s ease-in-out;
transition: width 0.6s ease-in-out;
}
input[type=text]:focus {
width: 100%;
</style>
</head>
<body>
<h2> Click on search box to animate </h2>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Output
Before clicking on the search form
Search form after a click
Example: Creating an animated search form
In this example, the search form becomes smaller with a click.
Conclusion
In this tutorial, we have learned to create an animated search form. The transition property can be used to animate the search form. The :focus selector is used for adding transition property for the search form.
