Home
CSS
CSS Forms
Tryit: Animate the width of the search input field
Run ❯
zig
.
com
×
Change Orientation
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </style> </head> <body> <h2>Animate width of search input</h2> <form> <input type="text" name="search" placeholder="Search.."> </form> </body> <!-- /css/tryit.asp?filename=trycss_form_search_anim Thu, 06 Feb 2025 18:15:18 GMT --> </html>
