1. Home

How To Make an Animated Search Form

Learn how to create an animated search form with CSS

How To Create an Animated Search Form

Click on the input field:

Step 1) Add HTML:

Example

<input type="text" name="search" placeholder="Search..">

Step 2) Add CSS:

Example

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
  width: 100%;
}
Try it Yourself »
Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Go to our CSS Forms Tutorial to learn more about how to style HTML Forms.

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US