Kütüphane kullanmadan CSS ile onay kutularını nasıl…

Kütüphane olmadan onay kutusunu stilize etmek için, standart öğeyi gizleme ve <label> ile ilişkili pseudo-öğe ::before veya ::after'ı stilize etme kombinasyonunu kullanabilirsiniz.

Standart onay kutusunu gizleme:

input[type="checkbox"] {
  display: none; /* veya visibility: hidden; height: 0; width: 0; */
}

Stilize edilmiş "kare" oluşturmak için <label> pseudo-öğesi kullanma:

input[type="checkbox"] + label::before {
  content: ''; /* Pseudo-öğenin gösterilmesi için zorunludur */
  display: inline-block;
  width: 1em; /* Kare boyutu */
  height: 1em; /* Kare boyutu */
  border: 1px solid #ccc; /* Kare kenarlığı */
  margin-right: 0.5em; /* Metin ile arasındaki boşluk */
  vertical-align: middle; /* Dikey hizalama */
  /* Diğer isteğe bağlı stiller: background-color, border-radius, box-shadow */
}

İşaretli durumda stil:

checked seçicisini kullanarak input'u ve buna uygun olarak label'ın pseudo-öğelerini değiştiriyoruz.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* İşaretli kutunun arka plan rengi */
  border-color: #007bff; /* İşaretli kutunun kenarlık rengi */
  /* Diğer isteğe bağlı stiller */
}

"Ok" veya başka bir gösterge ekleme:

İkinci pseudo-öğe (::after) kullanabilir veya mevcut ::before'u background-image (svg, data-url) veya border stilizasyonu ile stilize edebilirsiniz.

Ok oluşturmak için border ile örnek:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Ok çizgisinin genişliği */
  height: 0.7em; /* Ok çizgisinin yüksekliği */
  border-right: 2px solid white; /* Ok'nun sağ kısmı */
  border-bottom: 2px solid white; /* Ok'nun alt kısmı */
  transform: rotate(45deg); /* Ok oluşturmak için döndürme */
  position: absolute; /* ::before içindeki konumlandırma için */
  top: 0.1em; /* Pozisyon ayarı */
  left: 0.3em; /* Pozisyon ayarı */
  /* Üst label::before için position: relative; gerekebilir */
}

Son örneğin düzgün çalışması için, input[type="checkbox"] + label::before'a position: relative; ekleyin:

input[type="checkbox"] + label::before {
  /* ... önceki stiller ... */
  position: relative; /* ::after için eklenir */
}

Bu yaklaşım, onay kutusunun görünümünü tam kontrol etmenizi sağlar ve erişilebilirliği artırır, çünkü standart öğe hala var olur ve kullanıcı eylemlerine (tıklama, odak) yanıt verir. input ile label'ı id ve for öznitelikleriyle bağlamak önemlidir, böylece tıklama sırasında doğru şekilde çalışır.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Şartları kabul ediyorum</label>

Kütüphane kullanmadan CSS ile onay kutularını nasıl stillendirilir?