วิธีการ - แบบฟอร์มการค้นหาแบบเคลื่อนไหว
เรียนรู้วิธีสร้างแบบฟอร์มการค้นหาแบบเคลื่อนไหวด้วย CSS
วิธีสร้างแบบฟอร์มการค้นหาแบบเคลื่อนไหว
คลิกที่ช่องป้อนข้อมูล:
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<input type="text" name="search" placeholder="Search..">
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
เคล็ดลับ:ไปที่การสอนแบบฟอร์ม HTMLเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแบบฟอร์ม HTML
ไปที่การสอนแบบฟอร์ม CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบแบบฟอร์ม HTML