CSS ve SVG ile Özel Checkbox Yapma

Bu yazı, yalnızca CSS ile bir kutu ve SVG onay işaretiyle temiz, tarayıcılar arası özel bir checkbox oluşturmayı gösteriyor.

Sorun

Varsayılan tarayıcı checkbox’larını tutarlı şekilde stillendirmek zordur; özellikle mobilde amaçlanandan çok daha büyük render edilebilirler. width: 14px gibi standart boyut kısıtlamaları genellikle native widget’lar üzerinde etkisizdir.

Çözüm

appearance: none ile native render’ı kaldır, sonra kutuyu ve onay işaretini kendin çiz.

Canlı örnek

Enable notifications Subscribe to newsletter Accept terms

Yalnızca CSS ile özel checkbox

custom-checkbox.css

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  border: 1.5px solid #b0c4d8;
  border-radius: 4px;
  background: #f8fafc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  position: relative;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

input[type='checkbox']:hover {
  border-color: #00b88a;
}

input[type='checkbox']:checked {
  background: #00b88a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/60% no-repeat;
  border-color: #00b88a;
  box-shadow: none;
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Custom checkbox demo</title>
  <style>
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #e8eef5;
      padding: 2rem;
    }

    .demo {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 300px;
    }

    .demo label {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.65rem;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 8px;
      cursor: pointer;
      color: #1a2a3a;
      transition: background 0.15s ease;
    }

    .demo label:hover {
      background: rgba(120, 169, 255, 0.08);
    }

    .demo input[type='checkbox'] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      min-width: 16px;
      margin: 0;
      border: 1.5px solid #b0c4d8;
      border-radius: 4px;
      background: #f8fafc;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      position: relative;
      transition:
        background 0.15s ease,
        border-color 0.15s ease;
    }

    .demo input[type='checkbox']:hover {
      border-color: #00b88a;
    }

    .demo input[type='checkbox']:checked {
      background: #00b88a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/60% no-repeat;
      border-color: #00b88a;
      box-shadow: none;
    }
  </style>
</head>
<body>
  <div class="demo">
    <label><input type="checkbox" checked><span>Enable notifications</span></label>
    <label><input type="checkbox"><span>Subscribe to newsletter</span></label>
    <label><input type="checkbox" checked><span>Accept terms</span></label>
  </div>
</body>
</html>

Nasıl görünür ve hissettirir

İşaretsiz: yumuşak mavi-gri kenarlıklı, açık dolgulu ve hafif iç gölgeli 16px yuvarlatılmış kare. Düz ama dokunsal görünür.
Hover: kenarlık hızlı 0.15s geçişle nane yeşiline döner, anında geri bildirim verir.
İşaretli: kutu nane yeşiliyle dolar ve net bir beyaz SVG onay işareti ortada belirir. İç gölge kaybolur, işaretli durum dolgun hissettirir.

SVG onay işareti vektör olduğu için yüksek DPI ekranlarda keskin kalır ve appearance: none, width/height‘ı yok sayan native render’ı kaldırdığı için tüm widget mobilde küçük kalır.

Önemli noktalar

appearance: none ve -webkit-appearance: none native widget’ı kaldırır.
min-width, kutunun flex konteyner içinde ezilmesini önler.
Satır içi SVG data URL, ekstra istek olmadan her boyutta onay işaretini keskin tutar.
transition, hover ve işaretli durumlara cilalı bir his verir.