Cách tạo hộp checkbox với CSS Grid

CSS Grid Layout Module không chỉ có thể giải quyết vấn đề bố trí layout đồ sộ mà còn giải quyết tốt cách tạo kiểu label checkbox (hộp đánh dấu). Mặc dù có một phương pháp tương đối đơn giản để tạo label xuất hiện sau hộp check, nhưng không phải dễ dàng khi tạo label xuất hiện trước checkbox.

• Kích hoạt tính năng Check Box để thuận tiện khi chọn lựa file

Cách tạo checkbox không cần CSS Grid

Tạo kiểu label sau checkbox là một điều mà các nhà phát triển đã làm từ lâu. Kỹ thuật này là một trong những ví dụ chính và cũ nhưng mạnh mẽ mà CSS có thể sở hữu.

Dưới đây là code có thể nhiều người đã quen thuộc với nó, tạo label sau checkbox đã chọn:

HTML:

CSS:

Một label sau checkbox sẽ trông như thế này (tuy nhiên, bạn có thể sử dụng phong cách khác):

Code CSS ở trên sử dụng bộ tổ hợp anh chị em liền kề (adjacent sibling combinator) được đánh dấu bởi khóa +. Khi hộp checkbox nằm trong trạng thái :checked, một phần tử sau nó (thường là label) có thể được tạo kiểu bằng cách sử dụng phương pháp này.

Đây là một kỹ thuật đơn giản và hiệu quả. Bộ tổ hợp anh chị liền kề chọn phần tử tiếp theo, điều này có nghĩa là label phải đến sau checkbox trong mã nguồn HTML. Vì vậy, để tạo một label xuất hiện trước checkbox trên màn hình, chúng ta không thể di chuyển nó trước checkbox trong mã nguồn, vì bộ chọn anh chị em trước đó không tồn tại trong CSS. Mà chỉ để lại một lựa chọn: định vị lại checkbox và label sử dụng transform, position, margin hoặc một thuộc tính CSS khác, do đó label sẽ xuất hiện ở bên trái checkbox trên màn hình.

Các vấn đề với phương pháp truyền thống

Không có vấn đề gì với kỹ thuật nói trên nhưng nó có thể không hiệu quả trong những trường hợp nhất định như các vị trí sắp xếp lại của checkbox và label khiến nó không hoạt động. Ví dụ, bạn có thể phải thay đổi kích thước hoặc định vị lại checkbox theo thiết bị mà nó được hiển thị. Khi điều đó xảy ra, bạn cũng cần định vị lại label vì nó không tự động sắp xếp để phù hợp với việc định vị lại hoặc thay đổi kích thước của checkbox.

Chúng ta có thể loại bỏ bất lợi này nếu cung cấp một số bố cục vững chắc cho hộp checkbox và label, thay vì định vị chúng trên trang. Tuy nhiên, hầu hết các hệ thống bố trí, chẳng hạn như bảng hoặc cột, yêu cầu bạn thêm label trước checkbox trong mã nguồn để làm cho nó xuất hiện theo cùng một cách trên màn hình. Đó là điều chúng ta không muốn làm bởi vì bộ chọn phần tử tiếp theo trên label sẽ ngừng hoạt động.

Mặt khác CSS Grid là một hệ thống bố trí không phụ thuộc vào vị trí hoặc thứ tự của các phần tử trong mã nguồn. Do đó, CSS Grid là một giải pháp lý tưởng để gắn label xuất hiện trước checkbox.

Cách tạo checkbox với CSS Grid

Hãy bắt đầu với code HTML. Thứ tự của checkbox và label sẽ vẫn như cũ. Chúng ta chỉ cần thêm cả hai vào một lưới.

HTML

CSS kèm theo như sau:

Về cơ bản, thuộc tính display: grid biến một phần tử thành một grid container, grid-area xác định vùng lưới mà một phần tử thuộc về và grid-template-areas tạo thành một sơ đồ lưới bao gồm các vùng lưới khác nhau.

Trong code trên, có hai vùng lưới: "left" và "right", chúng sẽ tạo thành hai cột của một hàng lưới. Checkbox thuộc về khu vực "right" và label thuộc về khu vực "left".

Vì chúng ta không thay đổi vị trí tương đối của checkbox và label trong mã nguồn, nên vẫn có thể sử dụng bộ kết hợp anh chị em liền kề:

CSS

Lưu ý rằng một mục lưới luôn luôn được block, nó xuất hiện với một hộp xung quanh được gọi là grid-level box. Nếu bạn không muốn điều đó, ví dụ cho một label đặt một wrapper trên mục đó (gói nó trong một phần tử khác) và biến nó vào vùng lưới.

Chúc các bạn thực hiện thành công!