Animated search bar in html?

Do you want to create animated search bar in html? Here is the solution, When you type something in the search bar, this bar is wide.

Example :

Codes :
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </style> </head> <body> <form> <input type="text" name="search" placeholder="Search.."> </form> </body> </html>
Filename to Save As:

Post Top Ad