Search Form co dãn cho mobile

Với xu hướng Responsive Web Design - Quy trình thiết kế và phát triển web đáp ứng mọi thiết bị và mọi môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị

Vậy nên khung tìm kiếm là một trong những thứ quan trọng cho website. Để thêm phần thu hút cho tính năng tìm kiếm này và phù hợp với mọi kích thước màn hình mình muốn giới thiệu với các bạn cách tạo khung tìm kiếm co giãn - Expandable Search Form bằng cách sử dụng CSS3

Expandable Search Form cũng giống như form search bình thường chỉ có một sự khác biệt đó là nó có thể thay đổi kích thước được khi mình đưa con trỏ chuột vào và ra khỏi form rearch này

Trong bài này mình sẽ giới thiệu cho các bạn hai kiểu của Expandable Search thật ra chỉ là thay đổi kích thước hiển thị cho nó phù hợp với giao diện website