Custom Toggle Switch

Snippet này sẽ hướng dẫn bạn cách biến một thẻ <input type="checkbox"> nhàm chán thành một toggle switch (công tắc bật/tắt) mang phong cách hiện đại. Bằng cách kết hợp pseudo-elements và pseudo-class :checked trong CSS, bạn có thể tạo ra hiệu ứng animation cực kỳ mượt mà mà không cần động đến một dòng JavaScript nào.

Mã nguồn (Source Code)

<label class="custom-toggle">
  <input type="checkbox" class="custom-toggle-input" aria-label="Toggle Switch" />
  <span class="custom-toggle-slider"></span>
</label>

/* Container của toggle switch */
.custom-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Ẩn checkbox mặc định */
.custom-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Background của thanh trượt (slider) */
.custom-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e8f0;
  transition: background-color 0.4s;
  border-radius: 34px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Phần nút (thumb) của thanh trượt */
.custom-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Màu nền khi được check */
.custom-toggle-input:checked + .custom-toggle-slider {
  background-color: #3b82f6;
}

/* Outline khi focus bằng bàn phím */
.custom-toggle-input:focus-visible + .custom-toggle-slider {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Di chuyển của nút (thumb) khi được check */
.custom-toggle-input:checked + .custom-toggle-slider:before {
  transform: translateX(26px);
}

Điểm nhấn triển khai

Vì giao diện mặc định của <input type="checkbox"> phụ thuộc vào trình duyệt và rất khó để style lại, kỹ thuật được áp dụng ở đây là “giấu” thẻ checkbox thật đi và dùng thẻ <span> kế cận (thanh trượt) để vẽ lại toàn bộ giao diện mới.

1. Ẩn checkbox mặc định: Bằng cách set opacity: 0 cùng với width/height bằng 0, phần tử checkbox vẫn có thể hoạt động ngầm để lưu trạng thái nhưng hoàn toàn biến mất trên màn hình.
2. Tạo khối thanh trượt (slider): Tận dụng pseudo-element ::before của <span> để tạo thành cái “nút” (thumb) hình tròn di chuyển qua lại.
3. Hiệu ứng Animation nảy nhẹ: Việc áp dụng transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) mang đến một hiệu ứng nảy (bouncing effect) vô cùng tinh tế và chân thực khi nút tròn bật qua lại.
4. Đảm bảo Trợ năng (Accessibility): Nhờ có :focus-visible, người dùng thao tác bằng bàn phím (tab) vẫn sẽ nhìn thấy phần focus ring (đường viền), đáp ứng đầy đủ tiêu chuẩn về a11y.

Custom Toggle Switch là lựa chọn tuyệt vời cho những tính năng đòi hỏi thao tác Bật/Tắt trực quan ngay lập tức, ví dụ như trong màn hình cài đặt cấu hình hoặc tính năng chuyển đổi chế độ Dark/Light mode.