HTML5 + CSS3 + Javascript: Xây dựng select field responsive

Share vì hữu ích

Việc xây dựng các mục chọn Select (Select Field) đẹp về hình thức và hoạt động tốt cả về tính năng là một bài toán rất cơ bản dành cho các lập trình viên khi bắt đầu vào lập trình Frontend. Code Tốt xin hướng dẫn cách xây dựng một tính năng hoàn thiện và hoạt động tương thích đúng chuẩn responsive.

Các bài viết của chuyên mục Full-stack Frontend sẽ yêu cầu bạn nắm bắt và tự thực hành kiến thức, nên bạn cần lưu ý thực hiện đúng và đủ các nội dung bằng gợi ý từ Code Tốt. Việc copy code không giúp bạn trở thành pro đâu!!!

Mục đích của Custom Select Field Responsive

Các bạn hẳn đã biết khi nhấp vào một mục chọn và xổ ra danh sách, trông nó sẽ như thế này:

Tuy nhiên, nhiều website bạn sẽ thấy select field trông rất đẹp như thế này:

Bài toán sẽ phức tạp hơn:

Vậy bằng cách nào bạn thực hiện được yêu cầu sau?

  • Trên màn hình mobile: Hiển thị như desktop, nhưng khi click vào select option thì hiện ra giống như select của trình duyệt.
  • Trên màn hình tablet trở lên: Hiển thị như desktop, nhưng khi click vào select option thì hiện ra custom select field.
  • Sau khi click bất kể trên mobile hay desktop, nội dung được select từ danh sách sẽ hiển thị.

Câu trả lời đó chính là bài tập xây dựng Custom Select Field mà hôm nay Code Tốt sẽ chia sẻ. Do đây là một bài viết theo hướng training, kết quả code sẽ không được công bố ở cuối bài. Nhiệm vụ của bạn là hoàn thành theo hướng dẫn trên nhé!

Cũng bởi đây là bài viết tốn khá nhiều công sức của Code Tốt, các bạn hãy bỏ chút thời gian like dạo để nhiều người khác biết đến các bài viết hay của Code Tốt hơn nhé. Đừng chơi trick để xem nội dung bài viết, không hay đâu!!!

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời