CSS Checkbox Oluşturucu

Üretilen CSS ne yapar?

Kural, varsayılan görünümü kaldıran appearance: none ile doğrudan input’a uygulanır, böylece kutu stillendirilebilir:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Checkbox işaretlendiğinde kutu seçilen renkle dolar ve CSS ile çizilen beyaz bir tik işareti görünür:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Neden yerel bir input?

Stil, öğeyi asla bir div ile değiştirmez: gerçek <input type="checkbox"> klavye kullanımını, ekran okuyucu desteğini ve form gönderimini korur. appearance: none yalnızca görünümü değiştirir. Eski Safari sürümlerini desteklemeniz gerekiyorsa kurala -webkit-appearance: none ekleyin.

Odak ve üzerine gelme

Üretilen kural yumuşak bir renk geçişi içerir ancak odak veya üzerine gelme stilleri içermez. Klavye kullanıcıları odağın nerede olduğunu her zaman görebilsin diye :hover ve :focus-visible için kendi kurallarınızı ekleyin, örneğin kutunun çevresine renkli bir çerçeve.

Tik işareti

Tik işareti, 45 derece döndürülen küçük beyaz bir çizgidir. Farklı bir renk ya da daha ince veya daha kalın bir çizgi gerekiyorsa ::after kuralındaki border ve border-width değerlerini düzenleyin.