Sau đây là đoạn mã tạo một biểu mẫu tìm kiếm động bằng CSS -
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{ box-sizing: border-box; } input[type=text] { width: 170px; font-size: 16px; background-color: white; padding: 12px 20px 12px 40px; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </style> </head> <body> <h1>Animated search form example</p> <form> Search: <input type="text" name="search" placeholder="Search Here..."> </form> </body> </html>
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào hộp tìm kiếm -