Bỏ qua tới nội dung
Toolars
Khám phá
Báo lỗi

Tiện ích Thiết kế · Cục bộ

Trình tạo hộp kiểm CSS

CSS Checkbox Generator

Tạo kiểu checkbox 18–64 px giữ nguyên input thật — focus bàn phím và công nghệ hỗ trợ vẫn hoạt động — với màu hai trạng thái, rồi sao chép CSS sẵn dùng.

Lộ trình tác vụ / từ đầu vào đến kết quả

Đặt kích thước điều khiển

Chạy cục bộ · Không có gì được tải lên

Cách Trình tạo hộp kiểm CSS hoạt động, quyền riêng tư và các công cụ liên quan

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

  1. 01

    Đặt kích thước điều khiển

    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.

  2. 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.

  3. 03

    Chọn màu cho từng trạng thái

    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.

  4. 04

    Xem trước cả hai trạng thái

    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.

  5. 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.

  6. 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.

Thông tin công cụ

Xử lý
Trong trình duyệt của bạn
Dữ liệu nhập rời thiết bị này
Không bao giờ
Lưu giữ
Không có gì được lưu
Giá
Miễn phí

Dữ liệu bạn nhập ở lại trong trình duyệt.

Trình tạo hộp kiểm CSS dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.

Thực thi cục bộ

Chạy bên trong tab trình duyệt hiện tại.

Không xử lý ẩn

Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.

Không cần tài khoản

Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.

Đặt lại ngay lập tức

Xóa tab và dữ liệu đang làm việc sẽ biến mất.

Trình tạo hộp kiểm CSS thực sự làm gì

Một trang cài đặt đầy checkbox mặc định trông dở dang, còn một design system cần cùng một điều khiển trong mọi biểu mẫu mà không kéo theo phụ thuộc JavaScript. Vì CSS xuất ra giữ nguyên phần tử input thật, focus bàn phím và thông báo của trình đọc màn hình vẫn hoạt động — trong khi các màu thương hiệu đang thử nghiệm không bao giờ rời khỏi tab trình duyệt. Một cú gạt nhanh công tắc xem trước xác nhận cả hai mặt của tương tác trước khi sao chép bất kỳ đoạn mã nào. Cùng một quy tắc dùng được cho một biểu mẫu đơn lẻ hay cả một thư viện component.

Câu hỏi thường gặp

Checkbox có còn truy cập được không?
Có. Markup vẫn là một phần tử input thật; appearance: none chỉ thay cách vẽ nó. Bản xuất kèm đường viền :focus-visible 3 px theo màu nhấn của bạn và trạng thái :disabled mờ đi, còn trạng thái đã chọn vẫn là trạng thái nguyên bản mà công nghệ hỗ trợ thông báo.
Vì sao đường viền của tôi bị từ chối?
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.
Dấu tích được định cỡ thế nào?
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.
Điều gì xảy ra khi checkbox đổi trạng thái?
Dấu tích phóng từ không lên kích thước đầy đủ trong một hiệu ứng chuyển đổi transform 160 ms trong khi nền được tô bằng Màu khi chọn của bạn. Với prefers-reduced-motion, hiệu ứng chuyển đổi bị bỏ và trạng thái chỉ đổi tức thì, nên không có gì chuyển động với người dùng nhạy cảm.
Phần nào trong bản xuất là cố định, phần nào tôi đổi được?
Nền khi nghỉ và dấu tích luôn màu trắng, nên hãy chọn Màu khi chọn có đủ độ tương phản với nền trắng. Đường viền focus 3 px, khoảng đệm của nó và trạng thái :disabled nửa độ mờ là các giá trị cố định mà bạn có thể chỉnh tự do sau khi dán quy tắc.
Có gì được tải lên không?
Không. Mọi thứ render cục bộ trong tab hiện tại, không cần tài khoản, và không giá trị nào đi vào bộ nhớ lưu trữ, log hay mạng. Nhấn Đặt lại để quay về mặc định.

Tiếp tục trong Thiết kế

Tác vụ liên quan, không phải ngõ cụt.

Chuyển sang một không gian làm việc tập trung khác mà không cần quay lại mục lục đầy đủ.

Trình tạo animation loading CSS

CSS Loader Generator

Thiết kế spinner vòng quỹ đạo hoặc ba chấm nảy với khung 24–160 px, chu kỳ 0,2–4 giây và màu tùy chọn, rồi sao chép CSS kèm @keyframes và reduced-motion.

Tạo

Trình tạo công tắc CSS

CSS Switch Generator

Thiết kế công tắc CSS thuần với thanh trượt 44–128 px và núm trượt khớp tự động, xem trước hiệu ứng 180 ms, rồi sao chép mã kèm xử lý focus và reduced-motion.

Tạo

Trình tạo clip path CSS

CSS Clip Path Generator

Chỉnh đỉnh bằng cách kéo, bàn phím hoặc tọa độ. Bắt đầu từ bốn mẫu và sao chép khai báo clip-path hoặc CSS đầy đủ ngay trên máy.

Tạo

Trình tạo pattern nền CSS

CSS Background Pattern Generator

Tổ hợp nền chấm, lưới hoặc chéo chỉ từ gradient CSS — không tệp hình ảnh — với ô 8–96 px và hai màu, rồi sao chép quy tắc ba khai báo sẵn dùng.

Tạo