Tạo kiểu cho hộp đánh dấu

Tính năng web: accent-color :indeterminate Các thuộc tính biến đổi riêng lẻ Mặt nạ

Sử dụng HTML có ngữ nghĩa, dễ tiếp cận với mỗi hộp đánh dấu được liên kết với nhãn của hộp đó, bằng cách lồng <input> vào bên trong <label> hoặc bằng cách so khớp thuộc tính for của nhãn với id của dữ liệu đầu vào.

CSS hiện đại cung cấp hai phương pháp để tạo kiểu cho hộp đánh dấu: tuỳ chỉnh giao diện gốc bằng accent-color hoặc ghi đè cách trình bày mặc định bằng appearance: none trên phần tử <input type="checkbox">.

Tuỳ chỉnh gốc bằng accent-color

Để có kiểu dáng đơn giản, nhất quán với thương hiệu mà vẫn giữ được khả năng kết xuất gốc, hành vi của bàn phím, quy trình xác thực và chỉ báo tiêu điểm của hệ điều hành, hãy sử dụng accent-color.

.checkbox-native {
  accent-color: #1a73e8;

  /* Sizing is controlled via relative units */
  inline-size: 1.25em;
  aspect-ratio: 1;
  margin: 0;
  cursor: pointer;
}

Tạo kiểu hoàn toàn tuỳ chỉnh bằng appearance: none

Sử dụng appearance: none khi thiết kế yêu cầu quyền kiểm soát đối với hình dạng, kích thước, trạng thái hoặc chỉ báo của hộp đánh dấu. Thao tác này sẽ xoá kiểu hình ảnh gốc trong khi vẫn giữ <input> làm mục tiêu tương tác.

Đặt kích thước tương đối rõ ràng cho --checkbox-size và --checkbox-icon-size vì appearance: none sẽ xoá kích thước mặc định của trình duyệt. Giữ biểu tượng nhỏ hơn hộp đánh dấu để có không gian cho đường viền và khoảng đệm hình ảnh.

/* Reusable SVG assets */
:root {
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  --icon-dash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
}

/* Custom checkbox */
.checkbox-custom {
  --checkbox-size: 1.25em;
  --checkbox-icon-size: 0.7em;

  appearance: none;
  display: inline-grid;
  place-content: center;
  inline-size: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  border: 2px solid currentColor;
  cursor: pointer;

  &::before {
    content: "";
    inline-size: var(--checkbox-icon-size);
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--checkbox-icon) no-repeat center / contain;
    scale: 0;

    @media (prefers-reduced-motion: no-preference) {
      transition: scale 150ms ease;
    }

    @media (forced-colors: active) {
      background-color: CanvasText;
    }
  }

  &:checked {
    --checkbox-icon: var(--icon-check);
  }

  &:indeterminate {
    --checkbox-icon: var(--icon-dash);
  }

  &:is(:checked, :indeterminate)::before {
    scale: 1;
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

Trạng thái không xác định

Bạn không thể đặt trạng thái không xác định thông qua thuộc tính HTML; hãy đặt thuộc tính DOM indeterminate trong JavaScript (checkbox.indeterminate = true) và đảm bảo lớp giả :indeterminate khác biệt về mặt hình ảnh với cả trạng thái :checked và trạng thái không được đánh dấu:

  • Gốc (accent-color): Được trình duyệt tự động tạo kiểu bằng cách sử dụng accent-color của phần tử (không cần thêm quy tắc CSS :indeterminate).
  • Tuỳ chỉnh (appearance: none): Hoán đổi --checkbox-icon thành var(--icon-dash) trên .checkbox-custom:indeterminate như minh hoạ ở trên.
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

Hỗ trợ tiếp cận và tương tác

  • NÊN sử dụng :focus-visible thay vì :focus để tạo kiểu cho chỉ báo tiêu điểm trên hộp đánh dấu tuỳ chỉnh, nhờ đó, một đường viền riêng biệt sẽ xuất hiện khi di chuyển bằng bàn phím mà không xuất hiện khi nhấp bằng con trỏ.
  • KHÔNG sử dụng outline: none hoặc ẩn chỉ báo tiêu điểm trên hộp đánh dấu.

  • NÊN đảm bảo hộp đánh dấu hoặc <label> bao bọc hộp đánh dấu cung cấp mục tiêu nhấn tương tác ít nhất là 44px x 44px trong khi vẫn giữ kích thước hộp đánh dấu trực quan theo đơn vị tương đối:

    label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 44px;
  cursor: pointer;
}

  • NÊN cung cấp một biến thể kiểu :disabled giúp giảm độ mờ và đặt cursor: not-allowed để truyền tải rõ ràng trạng thái không hoạt động.

Những vấn đề cần lưu ý khi sử dụng accent-color

Cách trình duyệt hiển thị accent-color sẽ khác nhau. Đối với các chỉ báo thường được vẽ trên nền màu nhấn, chẳng hạn như dấu hộp đánh dấu và dấu chấm nút chọn, trình duyệt có thể áp dụng các cách xử lý khác nhau:

  • Chromium và Firefox thường chọn màu chỉ báo tương phản.
  • Thay vào đó, Safari có thể giữ nguyên chỉ báo màu trắng ở chế độ sáng hoặc chỉ báo màu đen ở chế độ tối, đồng thời sửa đổi màu nhấn phía sau chỉ báo đó. Việc điều chỉnh này không phải lúc nào cũng cung cấp đủ độ tương phản cho mọi màu được cung cấp, vì vậy, hãy thử nghiệm các kiểu kết hợp quan trọng trong Safari, bao gồm cả bảng phối màu sáng và tối. Đừng cho rằng Safari sẽ tự động chọn màu chỉ báo có độ tương phản tốt nhất.

Chiến lược dự phòng

Dự phòng và hỗ trợ trình duyệt cho màu nhấn

Thuộc tính accent-color là cải tiến tăng dần. Những trình duyệt không hỗ trợ thuộc tính này sẽ bỏ qua thuộc tính này và sử dụng màu giao diện người dùng mặc định.

Mặt nạ CSS