Trình tạo checkbox CSS

CSS được tạo có tác dụng gì

Quy tắc được áp trực tiếp lên input bằng appearance: none, loại bỏ giao diện mặc định để có thể tạo kiểu cho ô:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Khi checkbox được chọn, ô sẽ tô màu đã chọn và xuất hiện dấu chọn trắng được vẽ bằng CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Vì sao dùng input gốc

Kiểu này không bao giờ thay thế phần tử bằng div: <input type="checkbox"> thật vẫn giữ thao tác bàn phím, hỗ trợ trình đọc màn hình và gửi biểu mẫu. appearance: none chỉ thay đổi giao diện. Nếu cần hỗ trợ Safari phiên bản cũ, hãy thêm -webkit-appearance: none vào quy tắc.

Lấy nét và rê chuột

Quy tắc được tạo gồm hiệu ứng chuyển màu mượt nhưng không có kiểu rê chuột hay lấy nét. Hãy thêm quy tắc của riêng bạn cho :hover và :focus-visible để người dùng bàn phím luôn thấy vị trí lấy nét, ví dụ một đường viền màu quanh ô.

Dấu chọn

Dấu chọn là một đường trắng nhỏ xoay 45 độ. Nếu cần màu khác hoặc nét mảnh hơn, dày hơn, hãy sửa giá trị border và border-width trong quy tắc ::after.