How TO - Animated Search Form

❮ Previous Next ❯

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

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.

❮ Previous Next ❯