ล่าสุดการพัฒนาเว็บบทเรียน
 

วิธีการ - เคลื่อนไหวในแบบฟอร์มการค้นหา


เรียนรู้วิธีการสร้างแบบฟอร์มการค้นหาภาพเคลื่อนไหวด้วย 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%;
}
ลองตัวเอง»

ไปที่เรา สอนรูปแบบ CSS เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการรูปแบบรูปแบบ HTML