設定核取方塊樣式

網頁功能： accent-color :indeterminate 個別轉換屬性 遮罩

使用語意明確、無障礙的 HTML，將每個核取方塊與其標籤建立關聯，方法是將 <input> 巢狀置於 <label> 內，或將標籤的 for 屬性與輸入的 id 進行比對。

現代 CSS 提供兩種設定核取方塊樣式的方法：使用 accent-color 自訂原生外觀，或在 <input type="checkbox"> 元素上使用 appearance: none 覆寫預設呈現方式。

使用 accent-color 進行原生自訂

如要採用簡單、品牌一致的樣式，並保留原生算繪、鍵盤行為、驗證和作業系統焦點指標，請使用 accent-color。

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

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

使用 appearance: none 完整自訂樣式

如果設計需要控制核取方塊的形狀、大小、狀態或指標，請使用 appearance: none。這樣會移除原生視覺樣式，但保留 <input> 做為互動目標。

請為 --checkbox-size 和 --checkbox-icon-size 設定明確的相對大小，因為 appearance: none 會移除瀏覽器的預設尺寸。圖示應小於核取方塊，為邊框和視覺邊框間距保留空間。

/* 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;
  }
}

不確定狀態

不確定狀態無法透過 HTML 屬性設定，請在 JavaScript (checkbox.indeterminate = true) 中設定 indeterminate DOM 屬性，並確保 :indeterminate 虛擬類別在視覺上與 :checked 和未勾選狀態有所區別：

  • 原生 (accent-color)：瀏覽器會使用元素的 accent-color 自動設定樣式 (不需要額外的 :indeterminate CSS 規則)。
  • 自訂 (appearance: none)：如上所示，將 .checkbox-custom:indeterminate 上的 --checkbox-icon 替換為 var(--icon-dash)。
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

無障礙功能和互動

  • 建議使用 :focus-visible 而非 :focus 設定自訂核取方塊的焦點指標樣式，這樣鍵盤導覽時就會顯示明顯的外框，但指標點擊時不會顯示。
  • 請勿使用 outline: none 或隱藏核取方塊的焦點指標。

  • 務必確保核取方塊或其包裝 <label> 提供至少 44px x 44px 的互動命中目標，同時以相對單位調整視覺核取方塊的大小：

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

  • 務必提供 :disabled 樣式變化版本，降低不透明度並設定 cursor: not-allowed，清楚傳達停用狀態。

使用 accent-color 時應注意的問題

瀏覽器轉譯 accent-color 的方式不盡相同。 對於通常繪製在強調色背景上的指標 (例如核取方塊標記和圓形按鈕點)，瀏覽器可能會採用不同的處理方式：

  • Chromium 和 Firefox 通常會選取對比鮮明的指標顏色。
  • Safari 則可能會在淺色模式下保留白色指標，或在深色模式下保留黑色指標，同時修改指標後方的強調色。這項調整不一定能為所有提供的顏色提供足夠的對比度，因此請在 Safari 中測試重要組合，包括淺色和深色色彩配置。請勿假設 Safari 會自動選擇對比度最佳的指標顏色。

備用策略

accent-color 的備用方案和瀏覽器支援

accent-color 屬性是漸進增強。不支援這項屬性的瀏覽器會忽略該屬性，並使用預設的使用者介面顏色。

CSS 遮罩