Prev Demo
Animated Text Box
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title></title> <style> input[type=text] { width: 100px; height:100px; border: 2px solid #ccc; border-radius: 4px; font-size: 20px; background-color: green; background-image: url('images.jpg'); background-position: 20px 30px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.1s ease-in-out; } input[type=text]:focus { width: 100%; background-color:pink; } </style> </head> <body> <p>Animated search input:</p> <form> <input type="text" name="search" placeholder="Search.."> </form> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
