Menata Gaya Kotak Centang

Fitur web: accent-color :indeterminate Properti transformasi individual Mask

Gunakan HTML semantik yang mudah diakses dengan setiap kotak centang yang terkait dengan labelnya, baik dengan menyusun bertingkat <input> di dalam <label> atau dengan mencocokkan atribut for label dengan id input.

CSS modern menyediakan dua pendekatan untuk menata gaya kotak centang: menyesuaikan tampilan native dengan accent-color, atau mengganti presentasi default dengan appearance: none pada elemen <input type="checkbox">.

Penyesuaian native dengan accent-color

Untuk gaya visual yang sederhana dan konsisten dengan merek yang mempertahankan rendering native, perilaku keyboard, validasi, dan indikator fokus sistem operasi, gunakan accent-color.

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

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

Gaya kustom sepenuhnya dengan appearance: none

Gunakan appearance: none jika desain memerlukan kontrol atas bentuk, ukuran, status, atau indikator kotak centang. Tindakan ini akan menghapus gaya visual native sekaligus membiarkan <input> sebagai target interaktif.

Tetapkan ukuran relatif eksplisit untuk --checkbox-size dan --checkbox-icon-size karena appearance: none menghapus dimensi default browser. Buat ikon lebih kecil dari kotak centang untuk memberikan ruang bagi batas dan padding visualnya.

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

Status tidak tentu

Status tidak tentu tidak dapat ditetapkan melalui atribut HTML; tetapkan properti DOM indeterminate di JavaScript (checkbox.indeterminate = true) dan pastikan pseudo-class :indeterminate berbeda secara visual dari status :checked dan tidak dicentang:

  • Native (accent-color): Ditata gayanya secara otomatis oleh browser menggunakan accent-color elemen (tidak memerlukan aturan CSS :indeterminate tambahan).
  • Kustom (appearance: none): Tukar --checkbox-icon dengan var(--icon-dash) di .checkbox-custom:indeterminate seperti yang ditunjukkan di atas.
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

Aksesibilitas dan interaksi

  • LAKUKAN penggunaan :focus-visible, bukan :focus, untuk menata gaya indikator fokus pada kotak centang kustom sehingga garis batas yang jelas muncul untuk navigasi keyboard tanpa ditampilkan pada klik pointer.
  • JANGAN menggunakan outline: none atau menyembunyikan indikator fokus pada kotak centang.

  • LAKUKAN pastikan kotak centang atau <label> yang membungkusnya menyediakan target hit interaksi minimal 44px x 44px sekaligus menjaga ukuran kotak centang visual dalam unit relatif:

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

  • LAKUKAN: Sediakan varian gaya :disabled yang menurunkan opasitas dan menetapkan cursor: not-allowed untuk menyampaikan status tidak aktif dengan jelas.

Masalah yang perlu diperhatikan saat menggunakan accent-color

Rendering browser untuk accent-color bervariasi. Untuk indikator yang umumnya digambar di atas latar belakang warna aksen, seperti tanda kotak centang dan titik tombol pilihan, browser dapat menerapkan perlakuan yang berbeda:

  • Chromium dan Firefox umumnya memilih warna indikator yang kontras.
  • Safari dapat mempertahankan indikator putih dalam mode terang atau indikator hitam dalam mode gelap, sekaligus mengubah warna aksen di belakangnya. Penyesuaian ini tidak selalu memberikan kontras yang memadai untuk setiap warna yang disediakan, jadi uji kombinasi penting di Safari, termasuk skema warna terang dan gelap. Jangan berasumsi bahwa Safari akan otomatis memilih warna indikator yang memberikan kontras terbaik.

Strategi penggantian

Penggantian & dukungan browser untuk accent-color

Properti accent-color adalah progressive enhancement. Browser yang tidak mendukung properti ini akan mengabaikannya dan menggunakan warna UI default.

Masker CSS