CSS Checkbox Oluşturucu

Bir onay kutusu stili seçin, boyutu ve vurgu rengini ayarlayın; bu araç tarayıcının düz onay kutusunu, hâlâ tamamen tıklanabilir ve erişilebilir, özel stilli bir onay kutusuyla değiştiren CSS'i oluşturur — ikon fontu veya resim gerekmez.

Bu Araç Nedir?

Tarayıcının varsayılan onay kutuları her tarayıcıda farklı görünür ve doğrudan yeniden stillendirmesi zordur, çünkü yerleşik görünümü düz CSS yerine işletim sistemi tarafından çizilir. Standart çözüm, yerel onay kutusunu görsel olarak gizlemek ve onun yerine onay kutusunun :checked durumuyla yönlendirilen bir kardeş öğeyi stillendirmektir — girdi tamamen işlevsel ve erişilebilir kalır, yalnızca görünümü değişir.

Bu araç, üç yaygın onay kutusu stili için bu deseni oluşturur: animasyonlu onay işaretli yuvarlatılmış bir kutu, iOS tarzı kayan bir anahtar ve dolu bir daire (radyo düğmesi benzeri) stili. Seçili durumu görmek için önizlemedeki onay kutusuna tıklayın, boyut ve vurgu rengini ayarlayın, ardından CSS'i kopyalayın.

Kaynak: Selectors Level 4, W3C — bu tekniğin dayandığı :checked sözde sınıfını tanımlayan spesifikasyon.

Neden Kullanmalısınız?

Canlı, tıklanabilir önizleme — seçili ve seçili olmayan durumların tam olarak nasıl göründüğünü görmek için onay kutusunu değiştirin.
Tek bir araçta üç farklı, yaygın olarak kullanılan stil: onay işaretli kutu, kaydırmalı anahtar ve dolu daire.
Alttaki öğe gerçek bir <input type="checkbox"> olarak kalır, bu yüzden klavye gezinmesi, form gönderimi ve ekran okuyucular normal şekilde çalışmaya devam eder.
Ayarlanabilir boyut ve vurgu rengi, doldurulması gereken değişkenler olarak bırakılmak yerine doğrudan CSS değerlerine oluşturulur.
İkon fontu, SVG dosyası veya resim gerekmez — onay işareti ve düğme düz CSS kenarlıkları ve sözde öğelerle çizilir.
Ücretsizdir, tarayıcınızda çalışır, kayıt gerektirmez.

Nasıl Kullanılır

Bir stil seçin: yuvarlatılmış onay işareti, kaydırmalı anahtar veya dolu daire.
Onay kutusunu büyütmek veya küçültmek için boyut kaydırıcısını sürükleyin.
Bir vurgu rengi seçin — seçili durumun arka plan ve kenarlık rengi olur.
Hem seçili hem de seçili olmayan durumların iyi göründüğünü onaylamak için önizleme panelindeki onay kutusuna tıklayın.
Oluşturulan CSS'i stil sayfanıza kopyalayın ve önizleme işaretlemesiyle aynı yapıda sarılmış herhangi bir <input type="checkbox"> üzerinde kullanın.

Örnek

Giriş

Stil: yuvarlatılmış onay işareti · Boyut: 24px · Renk: turuncu

Çıkış

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Onay kutusu girdisi görsel olarak gizlenir; görünen kutu, girdinin :checked durumuyla stillendirilen kardeş bir <span>'dir; seçildiğinde onay işareti olarak küçük döndürülmüş bir kenarlık çizilir.

Neden yerel onay kutusunu kaldırmak yerine gizlemeli

Gerçek <input>'ü atlayıp yalnızca tıklama işleyicisi olan stillendirilmiş bir <div> ile onay kutusu oluşturmak cazip gelebilir, ancak bu, klavye desteğini, form gönderimini ve ekran okuyucu semantiğini boşuna kaybetmeniz anlamına gelir. Bu aracın oluşturduğu desen, gerçek onay kutusu girdisini işaretlemede tutar — yalnızca opacity: 0 ile görsel olarak gizlenmiş ve yeniden konumlandırılmıştır — böylece tarayıcı önemli olan her şeyde onu gerçek bir onay kutusu olarak görmeye devam ederken, görünür stil bir kardeş öğe tarafından yönetilir.

Üç stile genel bakış

Yuvarlatılmış onay işareti: form alanları, sözleşme onay kutuları ve çoklu seçim listeleri için en yaygın olan, tanıdık kare-artı-onay-işareti deseni.
Kaydırmalı anahtar: bir form alanından çok anlık bir açma/kapama ayarı gibi algılanır — onay kutusu listelerinden ziyade tercih ekranları için daha uygundur.
Dolu daire: yakındaki yuvarlatılmış arayüz öğelerinin yanında kare bir kutunun görsel olarak ağır kalacağı durumlarda kullanışlı, radyo düğmesine benzer minimal bir görünüm.

Arayüzünüzün geri kalanıyla uyumlu hale getirme

Oluşturulan vurgu rengi yalnızca seçili durumu etkiler — onay kutusunun sayfanın geri kalanıyla tutarlı hissettirmesi için markanızın veya buton renginizin ne olduğunu seçin. Daha bütünlüklü bir görünüm için arayüzün başka yerlerinde kullanılan aynı border-radius ile eşleştirin.

→ Kenar Yarıçapı Oluşturucu · Renk Seçici

Sıkça Sorulan Sorular

Stillendirilmiş onay kutusu hâlâ erişilebilir mi?

Evet — alttaki öğe gerçek bir <input type="checkbox"> olarak kalır, yalnızca kaldırılmak yerine görsel olarak gizlenir. Hâlâ odak alır, klavye girdisine yanıt verir (değiştirmek için boşluk tuşu) ve ekran okuyucular tarafından doğru şekilde duyurulur, çünkü yardımcı teknoloji yanındaki stillendirilmiş span'i değil, girdi öğesini okur.

CSS neden input:checked + .mark gibi bir kardeş seçici kullanıyor?

Görünür kutu, gerçek onay kutusu girdisinden ayrı bir öğe olduğu için, CSS'in bu kardeşi girdinin durumuna göre stillendirmek için bir yola ihtiyacı vardır. + birleştiricisi, seçili girdiden hemen sonraki öğeyi seçer; bu, JavaScript olmadan özel onay kutusu ve radyo düğmesi stilleri oluşturmanın standart tekniğidir.

Bunu yalnızca bir demoda değil, gerçek bir formda kullanabilir miyim?

Evet — oluşturulan CSS'i kopyalayın ve formunuzdaki gerçek bir onay kutusu girdisini HTML/önizlemede gösterilen aynı yapıyla sarın. Hâlâ yerel bir onay kutusu olduğu için, stilsiz bir onay kutusunun yapacağı gibi formla birlikte gönderilir ve mevcut form doğrulama mantığınızla çalışır.

Yuvarlatılmış stilde onay işareti neden animasyonlu?

Onay işaretindeki kısa bir ölçekleme animasyonu, anlık bir görünüp kaybolma yerine seçili durumun daha kasıtlı ve duyarlı hissettirmesini sağlar; bu, özenli arayüz onay kutularında yaygın bir desendir. Bu, oluşturulan kodun geri kalanıyla birlikte gelen küçük bir CSS @keyframes kuralıdır.

Kaydırmalı anahtar stili farklı bir HTML gerektirir mi?

Hayır — her üç stil de aynı alttaki işaretlemeyi kullanır (gizli bir onay kutusu girdisi artı görünür şekil için bir kardeş öğe). Bu araçta stil değiştirmek yalnızca aynı yapıya uygulanan CSS kurallarını değiştirir, bu yüzden daha sonra HTML'inize dokunmadan stil değiştirebilirsiniz.