Lộ trình tác vụ / từ đầu vào đến kết quả
Cách thiết kế một checkbox CSS tùy chỉnh
- 01
Đặt kích thước điều khiển
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: Dấu tích co giãn theo khoảng trống bên trong đường viền, chứ không theo kích thước bên ngoài. Bản xem trước và bản xuất dùng cùng một hình dạng viền CSS. Nhấp vào bản xem trước hoặc focus vào nó rồi nhấn Space để đổi trạng thái chọn nguyên bản. 24 Mẫu · Đã chọn · Màu
- 02
Định hình khung
Dùng điều khiển 18–64 px và viền 1–8 px. Phải còn lại ít nhất 8 px bên trong đường viền cho dấu tích. Các tổ hợp không hợp lệ sẽ xóa bản xem trước và vô hiệu hóa việc xuất.
- 03
Chọn màu cho từng trạng thái
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: Chọn Màu viền cho đường bao khi nghỉ và Màu khi chọn cho trạng thái tô đầy. Giữ Màu khi chọn đủ tối để tương phản với dấu tích trắng nằm phía trước, vì bản thân dấu tích luôn màu trắng.
- 04
Xem trước cả hai trạng thái
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: Bật Hiển thị trạng thái đã chọn để so sánh mặt nghỉ và mặt tô đầy trong bản xem trước trực tiếp. Dấu tích chuyển vào trong 160 ms kèm một cú phóng nhẹ — đúng chuyển động mà CSS xuất ra tái hiện giữa hai trạng thái.
- 05
Sao chép hoặc tải xuống CSS
Nhấn Sao chép CSS hoặc Tải xuống .css để lưu toolars-checkbox.css. Bộ quy tắc giữ nguyên một input thật bên dưới — appearance: none chỉ vẽ lại nó — và trạng thái :focus-visible lẫn :disabled đã có sẵn trong bản xuất.
- 06
Giữ markup nguyên bản
Gắn class .checkbox trực tiếp lên một phần tử input thật và ghép nó với một label như bạn vẫn làm với mọi checkbox. Focus bàn phím, hành vi nhấp chuột và thông báo của công nghệ hỗ trợ vẫn hoạt động vì không có gì mang tính ngữ nghĩa bị thay thế. Nền trắng khi nghỉ nằm trong quy tắc, nên trạng thái rỗng vẫn dễ đọc trên các bề mặt phủ màu. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.