CSS Onay Kutusu Üreteci

Cihazında canlı önizlemeli, saf CSS onay kutusu oluştur. Çerçeve, dolu veya yuvarlak stillerden birini seç, boyut ve renkleri ayarla, HTML ve CSS’i kopyala.

GizliTarayıcıdaAnındaLimitsiz

Boyut (22px)

Kenarlık (2px)

Köşe yuvarlaklığı (4px)

Kenarlık rengi

İşaretli renk

Odak halkasını göster

Önizleme

Açıp kapatmak için kutuya tıkla. Odak halkası açıksa klavyeyle Tab ile de ulaşabilirsin.

HTML ve CSS

/* HTML */
<label class="easy24-check">
  <input type="checkbox" />
  <span class="easy24-check__box" aria-hidden="true"></span>
</label>

/* CSS */
.easy24-check {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

.easy24-check input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.easy24-check__box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #94a3b8;
  border-radius: 4px;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.easy24-check__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 6px;
  height: 10px;
  border: solid #0f6e68;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.easy24-check input:checked + .easy24-check__box {
  border-color: #0f6e68;
  background: transparent;
}

.easy24-check input:checked + .easy24-check__box::after {
  opacity: 1;
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
  border-color: #0f6e68;
}

.easy24-check input:disabled + .easy24-check__box {
  opacity: 0.55;
  cursor: not-allowed;
}

.easy24-check:has(input:focus-visible) .easy24-check__box {
  outline: 2px solid color-mix(in srgb, #0f6e68 70%, white);
  outline-offset: 3px;
}

Yalnızca HTML

<label class="easy24-check">
  <input type="checkbox" />
  <span class="easy24-check__box" aria-hidden="true"></span>
</label>

Bu, yerel bir checkbox üzerinde dekoratif CSS’tir. Formunda name ve value bağla; erişilebilirlik için görünür bir metin etiketi tut. :has desteklemeyen eski tarayıcılar isteğe bağlı odak halkası stilini atlayabilir.

Nasıl çalışır

Stil ve renkleri seç

Bir hazır ayarla başla veya çerçeve, dolu ya da yuvarlak seç. Boyutu, kenarlığı, gerektiğinde köşe yuvarlaklığını ve kenarlık, işaretli durum ile onay işareti renklerini ayarla.

Canlı onay kutusunu dene

Önizleme kontrolüne tıkla veya Tab ile git. Kopyalayacağın HTML ve CSS önizlemeyi de sürdürür; hareket ve renkler parçacıkla uyumludur.

Parçacığı kopyala veya indir

Birleşik HTML ve CSS’i kopyala, yalnızca HTML’i al veya checkbox.css indir. Her şey bu sekmede kalır

CSS Onay Kutusu Üreteci nedir?

CSS Onay Kutusu Üreteci, rastgele parçacık aramadan yerel bir onay kutusunu stillendirmeni kolaylaştırır. Çerçeve, dolu veya yuvarlak seçenekli küçük bir HTML ve CSS çifti verir; odak stili ve gerçek formlarda görünür etiket ihtiyacı hakkında net notlar içerir.

Neden bu araç

Yerel bir input ve kutu span’inden saf bir CSS onay kutusu üretir.
Çerçeve, dolu ve yuvarlak görünümler arasında canlı önizlemeyle geçiş yapmanı sağlar.
Boyut, kenarlık, yuvarlaklık ve işaretli / işaretsiz renkleri ayarlamanı sağlar.
Klavye kullanıcıları için isteğe bağlı odak halkası ekler.
HTML ve CSS’i birlikte kopyalamanı veya yalnızca HTML’i almanı sağlar.
İstediğin kadar kullanabilirsin. Ücretsiz planda günlük kullanım limiti yoktur.

Sorular

CSS Onay Kutusu Üreteci ne yapar?

Yerel bir input kullanan stilli bir onay kutusu için HTML ve CSS üretir. Görünümü tarayıcıda ayarlar, işaretli ve işaretsiz durumları önizler ve parçacığı projene kopyalarsın.

Onay kutusu erişilebilir mi?

Kontrol, label içinde gerçek bir checkbox tutar; bu ekran okuyuculara ve klavyeye yardımcı olur. Seçimi adlandıran görünür metni yanına koy ve mümkünse odak halkasını açık bırak.

JavaScript gerekir mi?

Hayır. İşaretli stiller yalnızca CSS ile çalışır. Uygulaman yerel form kontrolünün ötesinde tepki verecekse JavaScript ekle.

CSS Anahtar’dan farkı nedir?

CSS Anahtar kayan bir aç kapa üretir. Bu araç onay işaretli kare veya yuvarlak bir kutudur. Aç kapa ayarları için Anahtar’ı, çoklu seçim ve onay metinleri için Onay Kutusu’nu kullan.

CSS’im sunucuya gönderilir mi?

Hayır. Her şey tamamen bu tarayıcı sekmesinde çalışır.

Günlük limit var mı?

Hayır. Bu aracın ücretsiz planda günlük kullanım limiti yoktur.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç