Onay kutularını biçimlendirme

Web özellikleri: accent-color :indeterminate Bağımsız dönüştürme özellikleri Maskeler

<input> öğesini <label> içine yerleştirerek veya etiketin for özelliğini girişin id özelliğiyle eşleştirerek her onay kutusunun kendi etiketiyle ilişkilendirildiği semantik ve erişilebilir HTML kullanın.

Modern CSS, onay kutularını stillendirmek için iki yaklaşım sunar: accent-color ile yerel görünümü özelleştirme veya <input type="checkbox"> öğesinde appearance: none ile varsayılan sunumu geçersiz kılma.

accent-color ile yerel özelleştirme

Doğal oluşturma, klavye davranışı, doğrulama ve işletim sistemi odak göstergelerini koruyan basit, markayla tutarlı bir stil için accent-color kullanın.

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

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

appearance: none ile tamamen özel stil oluşturma

Tasarım, onay kutusunun şekli, boyutu, durumları veya göstergeleri üzerinde kontrol gerektirdiğinde appearance: none kullanın. Bu işlem, doğal görsel stili kaldırır ancak <input> öğesini etkileşimli hedef olarak bırakır.

appearance: none, tarayıcının varsayılan boyutlarını kaldırdığından --checkbox-size ve --checkbox-icon-size için açık göreli boyutlar ayarlayın. Kenarlığı ve görsel dolgusu için yer bırakmak amacıyla simgeyi onay kutusundan daha küçük tutun.

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

Belirsiz durum

Belirsiz durum, HTML özelliği aracılığıyla ayarlanamaz. JavaScript'te (checkbox.indeterminate = true) indeterminate DOM özelliğini ayarlayın ve :indeterminate sözde sınıfının hem :checked hem de işaretlenmemiş durumlardan görsel olarak farklı olduğundan emin olun:

  • Yerel (accent-color): Öğenin accent-color kullanılarak tarayıcı tarafından otomatik olarak stillendirilir (ek :indeterminate CSS kuralı gerekmez).
  • Özel (appearance: none): Yukarıda gösterildiği gibi .checkbox-custom:indeterminate üzerinde --checkbox-icon ile var(--icon-dash) arasında geçiş yapın.
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

Erişilebilirlik ve etkileşim

  • Özel onay kutularındaki odak göstergelerini biçimlendirmek için :focus yerine :focus-visible KULLANIN. Böylece, işaretçi tıklamalarında görünmeden klavye ile gezinme için belirgin bir çerçeve görünür.
  • Onay kutularında outline: none kullanmayın veya odak göstergelerini gizlemeyin.

  • DO Onay kutusunun veya sarmalayıcısının <label> en az 44px x 44px boyutunda etkileşim isabeti hedefi sağladığından emin olun ve görsel onay kutusunun boyutunu göreceli birimlerde tutun:

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

  • YAPIN: Etkin olmayan durumları net bir şekilde belirtmek için opaklığı azaltan ve cursor: not-allowed değerini ayarlayan bir :disabled stil varyantı sağlayın.

accent-color kullanırken dikkat edilmesi gereken sorunlar

accent-color öğesinin tarayıcıda oluşturulma şekli değişiklik gösterir. Tarayıcılar, genellikle vurgu rengi arka plan üzerine boyanan göstergeler (ör. onay kutusu işaretleri ve radyo düğmesi noktaları) için farklı işlemler uygulayabilir:

  • Chromium ve Firefox genellikle zıt bir gösterge rengi seçer.
  • Safari ise açık modda beyaz bir göstergeyi veya koyu modda siyah bir göstergeyi koruyarak arkasındaki vurgu rengini değiştirebilir. Bu ayarlama, sağlanan her renk için her zaman yeterli kontrast sağlamaz. Bu nedenle, Safari'de hem açık hem de koyu renk şemaları dahil olmak üzere önemli kombinasyonları test edin. Safari'nin en iyi kontrastı sağlayan gösterge rengini otomatik olarak seçeceğini varsaymayın.

Yedek stratejiler

Vurgu rengi için yedekler ve tarayıcı desteği

accent-color özelliği, progresif geliştirmedir. Bu özelliği desteklemeyen tarayıcılar, özelliği yok sayar ve varsayılan kullanıcı arayüzü renklerini kullanır.

CSS maskeleri