How to create: animated search box

Learn how to use CSS to create an animated search form.

Click on the input field:

How to create an animated search box

Step 1 - Add HTML:

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

Step 2 - Add CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* When the input field gains focus, change its width to 100% */
input[type=text]:focus {
  width: 100%;
}

Try It Yourself

Related Pages

Tutorial:HTML Form

Tutorial:CSS Form