Trình Tạo Công Tắc CSS

Điều chỉnh các tùy chọn để thiết kế một công tắc bật/tắt (toggle switch), nhấp vào khung xem trước trực tiếp để xem hoạt ảnh, sau đó sao chép mã HTML và CSS sẵn sàng sử dụng. Đặt chiều rộng, chiều cao, màu thanh trượt khi tắt/bật, màu núm gạt, độ bo góc và tốc độ chuyển động — kết quả là một công tắc dựa trên checkbox tiêu chuẩn, dễ tiếp cận, chứ không chỉ là một hình dạng trang trí.

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

Công tắc bật/tắt CSS là một checkbox được tạo kiểu để trông và hoạt động giống như một công tắc bật/tắt vật lý — một thanh trượt hình viên thuốc với núm gạt hình tròn trượt từ bên này sang bên kia. Bên dưới, nó vẫn là một input checkbox thật, và điều đó quan trọng: nó giữ cho control có thể điều khiển bằng bàn phím, sử dụng được với trình đọc màn hình và hoạt động đúng khi gửi biểu mẫu — khác với một công tắc chỉ được dựng từ các div có thể nhấp.

Công cụ này xây dựng mẫu đó cho bạn: một checkbox ẩn, một thanh trượt đổi màu dựa trên :checked, và một núm gạt trượt bằng CSS transform. Điều chỉnh các thanh trượt và bộ chọn màu, nhấp vào khung xem trước để kiểm tra hoạt ảnh chuyển đổi thực tế, và sao chép cả CSS lẫn đoạn mã HTML tối thiểu mà nó phụ thuộc vào.

Nguồn: WAI-ARIA Authoring Practices, W3C — khuyến nghị dùng một input checkbox thật làm nền tảng dễ tiếp cận cho control dạng switch, đó là lý do kết quả của trình tạo này vẫn giữ nguyên phần tử input gốc.

Tại Sao Nên Dùng?

Khung xem trước là một công tắc thật, có thể nhấp — không phải hình ảnh tĩnh — nên bạn có thể kiểm tra chính xác hoạt ảnh trước khi sử dụng.
Xuất ra cả CSS lẫn cấu trúc HTML dễ tiếp cận (input checkbox + label) mà CSS phụ thuộc vào.
Kiểm soát đầy đủ chiều rộng/chiều cao thanh trượt, màu khi tắt, màu khi bật, màu núm gạt, độ bo góc và tốc độ chuyển động tại một nơi.
Sử dụng mẫu checkbox + bộ chọn :checked tiêu chuẩn, nên công tắc vẫn điều hướng được bằng bàn phím và hoạt động bên trong các biểu mẫu thật.
Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu.
Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

Đặt chiều rộng và chiều cao để định kích thước thanh trượt — núm gạt tự động được đặt kích thước vừa khít với một khoảng đệm nhỏ.
Chọn màu trạng thái tắt (chưa chọn) của thanh trượt, và màu trạng thái bật khi được kích hoạt.
Chọn màu núm gạt — màu trắng hoặc trung tính sáng thường tạo độ tương phản mạnh nhất với thanh trượt.
Đặt border radius thành 50% cho công tắc hình viên thuốc cổ điển, hoặc giảm xuống để có hình chữ nhật hơi bo góc.
Điều chỉnh tốc độ chuyển động để kiểm soát tốc độ núm gạt trượt và màu thanh trượt chuyển đổi giữa các trạng thái.
Nhấp vào công tắc trong khung xem trước để xác nhận hoạt ảnh trông ổn, sau đó sao chép CSS và HTML vào dự án của bạn.

Ví dụ

Đầu vào

Chiều rộng: 52px · Chiều cao: 28px · Màu tắt: #cbd5e1 · Màu bật: #ea580c · Bán kính: 50% · Tốc độ: 200ms

Đầu ra

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Cốt lõi của mẫu này: trạng thái :checked của checkbox, kết hợp với bộ chọn anh em chung (~), điều khiển cả màu nền của thanh trượt lẫn khoảng cách trượt của núm gạt.

Tại sao dùng checkbox thay vì div có trình xử lý nhấp chuột

Rất dễ bị cám dỗ để xây dựng một công tắc từ hai phần tử <div> và một chút JavaScript đổi class khi nhấp, nhưng cách làm đó thường phá vỡ khả năng điều hướng bằng bàn phím, thông báo của trình đọc màn hình và việc gửi biểu mẫu — một checkbox thật xử lý cả ba điều này miễn phí. Mẫu mà công cụ này tạo ra giữ <input type="checkbox"> làm phần tử tương tác thực sự (ẩn về mặt hình ảnh nhưng vẫn có thể focus), và chỉ dùng CSS thuần — không hề có JavaScript — để tạo kiểu cho thanh trượt và núm gạt dựa trên trạng thái :checked gốc của checkbox.

Các kiểu công tắc phổ biến

Công tắc viên thuốc cổ điển: border radius 50%, kích thước vừa phải (rộng 48–56px), thay đổi màu rõ rệt giữa bật/tắt.
Công tắc kiểu bảng cài đặt: kích thước nhỏ hơn (rộng 36–44px), màu tắt trầm (xám nhạt) đối lập với trạng thái bật màu thương hiệu.
Công tắc hơi bo góc: border radius khoảng 20–30% thay vì viên thuốc hoàn toàn, cho vẻ ngoài chữ nhật hơn, giống ứng dụng.
Công tắc nhanh, gọn: tốc độ chuyển động 100–150ms cho cảm giác tức thì và phản hồi nhanh.
Công tắc chậm, thong thả: tốc độ chuyển động 300–400ms cho cảm giác mượt mà và tinh tế hơn, hữu ích cho một công tắc cài đặt nổi bật duy nhất.

Kết hợp với các công cụ CSS khác

Thanh trượt và núm gạt được tạo ra đã dùng border-radius bên dưới, vì vậy nếu bạn muốn một biến thể vuông vắn hoặc bo góc khác ngoài những gì thanh trượt cung cấp, Trình Tạo Border Radius cho phép bạn tinh chỉnh từng góc độc lập trước khi dán giá trị vào. Trình Tạo Box Shadow hữu ích để thêm một bóng nhẹ cho núm gạt nhằm tăng chiều sâu.

→ Trình Tạo Border Radius · Trình Tạo Box Shadow

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

Tại sao kết quả bao gồm cả HTML, không chỉ CSS?

Một công tắc bật/tắt không chỉ đơn thuần là hình ảnh — nó phụ thuộc vào một <input type="checkbox"> thật được bọc trong <label>, cộng với các phần tử thanh trượt và núm gạt mà CSS nhắm tới. Nếu không có đúng cấu trúc đó, các bộ chọn dựa trên :checked trong CSS được tạo ra sẽ không có gì để gắn vào, vì vậy cả hai phần được sao chép cùng nhau.

Công tắc này có dễ tiếp cận không?

Có — vì phần tử tương tác là một checkbox thật (chỉ bị ẩn về mặt hình ảnh bằng kỹ thuật giữ nó trong cây trợ năng, không dùng display:none), nó vẫn có thể focus bằng Tab, chuyển đổi bằng phím Cách hoặc Enter, và được trình đọc màn hình thông báo chính xác là một checkbox ở trạng thái đã chọn/chưa chọn hiện tại.

Tôi có thể dùng cái này trong một biểu mẫu HTML thật không?

Có. Vì phần tử bên dưới là một input checkbox tiêu chuẩn, bạn có thể gán cho nó thuộc tính name và value, và nó sẽ được gửi giống như bất kỳ checkbox nào khác — công tắc được chọn gửi giá trị của nó, công tắc chưa chọn bị bỏ qua, giống hệt một checkbox thông thường.

Tại sao núm gạt di chuyển bằng transform thay vì thay đổi vị trí left?

Việc tạo hoạt ảnh cho transform: translateX() được trình duyệt xử lý ở lớp compositor và vẫn mượt mà ngay cả trên thiết bị cấu hình thấp, trong khi tạo hoạt ảnh cho left sẽ kích hoạt tính toán lại bố cục ở mỗi khung hình. Vì lý do này, CSS được tạo ra luôn dùng transform cho chuyển động trượt.

Thanh trượt border radius thực sự kiểm soát điều gì?

Nó co giãn cả độ bo góc của thanh trượt lẫn núm gạt cùng lúc, tỷ lệ theo chiều cao của thanh trượt. Ở mức 50%, bạn có được một viên thuốc bo tròn hoàn toàn với núm gạt hình tròn; giá trị thấp hơn giữ hình dạng vuông vắn hơn cho một công tắc vuông vức, giống ứng dụng hơn.