Advanced Checkbox Styling với CSS Grid

CSS Grid Layout Module không chỉ giải quyết vấn đề bố cục mà còn có thể giải quyết một số vấn đề cho các checkbox, label. Mặc dù có một số phương pháp để định dạng label sau checkbox, nhưng lại không dễ dàng đối với trường hợp lable đứng trước checkbox.

Checkbox styling mà không dùng CSS Grid

Định dạng một label phía sau checkbox là một phương pháp truyền thống mà các developer vẫn thường dùng, nó là một ví dụ điển hình cho sức mạnh của CSS.

<input type="checkbox">
<label>label for the checkbox</label>

input:checked + label {
  /* style me */
}

Nó có thể giống như thế này (tất nhiên , bạn cũng có thể định dạng nó theo kiểu khác) Mã CSS ở trên sử dụng bộ tổ hợp cùng ký tự liền kề được đánh dấu bởi phím +. Khi một checkbox ở trạng thái : checked ,một phần tử sau nó (thường là label) sẽ được định dạng theo phương pháp này. Một kĩ thuật đơn giản và hiệu quả như vậy, thế thì có gì sai? Không có gì, cho đến khi có một label đứng trước một checkbox. Bộ tổ hợp liền kề chọn phần tử tiếp theo; điều này có nghĩa là label phải xuất hiệ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. Mà chỉ để lại một lựa chọn: định vị lại checkbox và label bằng cách sử dụng transform hoặc position hoặc margin hoặc thuộc tính CSS khác , do đó label 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ó gì sai phần lớn với kỹ thuật nói trên nhưng nó có thể không hiệu quả trong một số trường hợp. Điều đó có nghĩa là các trường hợp trong đó các vị trí sắp xếp lại của checkbox và label không làm việc nữa Hãy nghĩ khi responsive , chẳng hạn.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ị trên. Khi điều đó xảy ra, bạn cũng cần phải định vị lại label vì không có sự sắp xếp lại tự động nào được thực hiện với label để phản hồi lại việc định vị lại / 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 chúng ta chỉ có thể cung cấp một số bố cục vững chắc cho 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. CSS Grid, mặt khác, là một hệ thống bố trí không phụ thuộc vào vị trí / 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.

Checkbox styling với CSS Grid

Hãy bắt đầu với mã 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 grid.

div id="cbgrid">
  <input type="checkbox">
  <label>label for the checkbox</label>
</div>

CSS kèm theo như sau:

#cbgrid {
  display: grid;
  grid-template-areas: "left right";
  width: 150px;
}
input[type=checkbox] {
  grid-area: right;
}
label {
  grid-area: left;
}

Trong mã trên, có hai vùng grid: "left" và "right". Chúng tạo thành hai cột của một ** grid row**. Checkbox thuộc về khu vực "right" và label để "left". Đây là cách chúng hiển thị trên màn hình: Vì chúng ta không thay đổi vị trí tương đối của checkbox và label trong mã nguồn, chúng ta vẫn có thể sử dụng bộ kết hợp phân chia lân cận:

input:checked + label {
  /* style me */
}

Lưu ý rằng một mục grid luôn luôn được blockified; nó xuất hiện với một hộp xung quanh được gọi là grid-level. 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 grid. Hi vọng rằng CSS Grid giúp bạn định dạng bố cục các checkbox và label một cách dễ dàng.

Nguồn: hongkiat.com