นี่คือโค้ดสำหรับการสร้างฟอร์มค้นหาที่มีแอนิเมชันขยายความกว้างเมื่อคลิก (Animated Search Form) ด้วย CSS
ตัวอย่าง
<!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</h1> <form> Search: <input type="text" name="search" placeholder="Search Here..."> </form> </body> </html>
ผลลัพธ์
โค้ดจะแสดงผลดังนี้ −
เมื่อคลิกที่ช่องค้นหา −
