Trình Tạo Checkbox CSS

Công Cụ Này Là Gì?

Ô chọn mặc định của trình duyệt trông khác nhau ở mỗi trình duyệt và rất khó chỉnh sửa kiểu trực tiếp, vì giao diện có sẵn của nó do hệ điều hành vẽ chứ không phải CSS thuần. Cách khắc phục tiêu chuẩn là ẩn ô chọn gốc về mặt hình ảnh và thay vào đó tạo kiểu cho một phần tử anh em, được điều khiển bởi trạng thái :checked của ô chọn — input vẫn hoạt động và truy cập được đầy đủ, chỉ thay đổi giao diện.

Công cụ này xây dựng mẫu đó cho ba kiểu ô chọn phổ biến: một ô bo góc với dấu tick có hoạt ảnh, một công tắc trượt kiểu iOS, và một kiểu vòng tròn đặc (giống nút radio). Nhấp vào ô chọn trong bản xem trước để xem trạng thái đã chọn, điều chỉnh kích thước và màu nhấn, rồi sao chép CSS.

Nguồn: Selectors Level 4, W3C — đặc tả định nghĩa lớp giả :checked mà kỹ thuật này dựa vào.

Tại Sao Nên Dùng?

• Bản xem trước trực tiếp, có thể nhấp — chuyển đổi ô chọn để xem chính xác trạng thái đã chọn và chưa chọn trông như thế nào.
• Ba kiểu khác biệt, thường được dùng trong một công cụ duy nhất: ô có dấu tick, công tắc trượt và vòng tròn đặc.
• Phần tử bên dưới vẫn là một <input type="checkbox"> thật, nên điều hướng bàn phím, gửi biểu mẫu và trình đọc màn hình vẫn hoạt động bình thường.
• Kích thước và màu nhấn có thể điều chỉnh, được tạo trực tiếp vào giá trị CSS thay vì để lại dưới dạng biến bạn phải tự điền.
• Không cần font icon, tệp SVG hay hình ảnh — dấu tick và nút gạt được vẽ bằng border CSS thông thường và pseudo-element.
• Miễn phí, chạy trong trình duyệt của bạn, không cần đăng ký.

Cách Sử Dụng

1. Chọn một kiểu: dấu tick bo góc, công tắc trượt hoặc vòng tròn đặc.
2. Kéo thanh trượt kích thước để phóng to hoặc thu nhỏ ô chọn.
3. Chọn một màu nhấn — màu này sẽ trở thành màu nền và viền của trạng thái đã chọn.
4. Nhấp vào ô chọn trong bảng xem trước để xác nhận cả trạng thái đã chọn và chưa chọn đều trông ổn.
5. Sao chép CSS được tạo ra vào stylesheet của bạn và dùng trên bất kỳ <input type="checkbox"> nào được bọc theo cùng cấu trúc như mã HTML xem trước.

Ví dụ

Đầu vào

Kiểu: dấu tick bo góc · Kích thước: 24px · Màu: cam

Đầu ra

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Input của ô chọn bị ẩn về mặt hình ảnh; ô hiển thị là một <span> anh em được tạo kiểu theo trạng thái :checked của input, với một viền nhỏ xoay được vẽ thành dấu tick khi được chọn.

Vì sao ẩn ô chọn gốc thay vì xóa bỏ nó

Rất dễ bị cám dỗ bỏ qua <input> thật và chỉ xây dựng ô chọn từ một <div> có kiểu với trình xử lý sự kiện nhấp chuột, nhưng làm vậy sẽ mất đi miễn phí sự hỗ trợ bàn phím, gửi biểu mẫu và ngữ nghĩa cho trình đọc màn hình. Mẫu mà công cụ này tạo ra vẫn giữ input ô chọn thật trong mã HTML — chỉ ẩn về mặt hình ảnh bằng opacity: 0 và định vị lại — nên trình duyệt vẫn coi nó là một ô chọn thật ở mọi khía cạnh quan trọng, trong khi một phần tử anh em đảm nhận kiểu hiển thị.

Tổng quan ba kiểu

• Dấu tick bo góc: mẫu quen thuộc hình vuông kèm dấu tick, phổ biến nhất trong các trường biểu mẫu, ô chọn đồng ý điều khoản và danh sách chọn nhiều.
• Công tắc trượt: mang cảm giác giống một cài đặt bật/tắt tức thì hơn là một trường biểu mẫu — phù hợp hơn cho màn hình tùy chọn thay vì danh sách ô chọn.
• Vòng tròn đặc: giao diện tối giản, giống nút radio, hữu ích khi một ô vuông trông quá nặng nề bên cạnh các phần tử giao diện bo tròn xung quanh.

Kết hợp với phần còn lại của giao diện

Màu nhấn được tạo ra chỉ ảnh hưởng đến trạng thái đã chọn — chọn màu thương hiệu hoặc màu nút bấm của bạn để ô chọn hài hòa với phần còn lại của trang. Kết hợp với cùng giá trị border-radius được dùng ở những nơi khác trong giao diện để có vẻ ngoài đồng nhất hơn.

→ Trình Tạo Border Radius · Bảng Chọn Màu

Câu Hỏi Thường Gặp