Beautiful Checkbox CSS Styles — Nâng cấp giao diện form của bạn

Checkbox là một trong những phần tử cơ bản nhất trong form, nhưng với một chút CSS tinh tế, bạn có thể biến nó trở nên cực kỳ bắt mắt và hiện đại. Trong bài viết này, chúng ta sẽ khám phá cách tạo checkbox đẹp, tối giản và tương thích với cả light/dark mode — mà không cần dùng bất kỳ hình ảnh hay thư viện nào.

1. Checkbox mặc định

Dưới đây là một ví dụ cơ bản, chỉ với HTML thuần túy:

<label class="checkbox">
  <input type="checkbox" />
  <span>Tôi đồng ý với điều khoản</span>
</label>

2. CSS làm đẹp checkbox

Bây giờ, hãy thêm một chút CSS để tạo hiệu ứng tròn mềm mại, mượt mà khi tick chọn.

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.checkbox input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 6px;
  position: relative;
  transition: all 0.3s ease;
}

.checkbox input:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.checkbox input:hover {
  transform: scale(1.1);
}

3. Demo trực tiếp

Tôi đồng ý với điều khoản

4. Kết luận

Với một vài dòng CSS như trên, bạn đã có thể biến checkbox mặc định khô khan thành một phần tử tinh tế, dễ chịu với cả hai chế độ sáng và tối. Bạn có thể tuỳ chỉnh kích thước, bo góc, màu chủ đạo để phù hợp với phong cách thiết kế của website.