Checkbox ve radio

CSS kursu · Orta seviye · Ders 80/98

checkbox ve radio stillerini öğrenirsin.

checkbox ve radio varsayılanı

checkbox ve radio input türleri seçim için kullanılır: ilki birden çok seçim, ikincisi tek seçim içindir. Tarayıcı bunları küçük kare ve daire olarak çizer.

Varsayılan görünüm küçüktür, markayla uyumsuzdur ve tarayıcılar arasında değişir. Bu yüzden tasarımcılar genellikle özgün bir görünüm kurar: işaret kutusunu kareye boyar, seçili durumu kendi renkleriyle gösterir.

appearance özelliği

Özgün bir görünüm kurmak için önce tarayıcının çizdiği öntanımlı şekli kaldırmalısın. Bunun için appearance: none; yazılır.

Bu özellik bir öğeye tarayıcının standart araç setini uygulamaz. Sonuçta checkbox ve radio, sıradan kutular gibi davranır; sen de width, height, border ve background ile istediğin gibi biçimlersin. Üzerine :checked sözde sınıfı ekleyerek seçili durumu çizersin.

Özel checkbox görünümü

appearance: none'dan sonra kutuyu serbestçe boyarsın. Yaygın bir kalıp: kare kutu, yuvarlatılmış köşe, seçili durumda iç dolu işaret.

Örnek: input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid #2563eb; border-radius: 4px; }. Ardından input[type="checkbox"]:checked için arka plan mavi yapılır. Böylece kutu markayla uyumlu, dokunması kolay olur.

Uygulama Özel bir checkbox kur

İki bildirim bloğu yaz. input[type="checkbox"] için: appearance: none;, width: 20px;, height: 20px;, border: 2px solid #2563eb;. input[type="checkbox"]:checked için: background: #2563eb;.

Örnek çözümü göster

input[type="checkbox"] seçicisini aç, dört bildirimi yaz; sonra :checked için arka plan ekle.
Örnek çözüm:
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #2563eb;
}
input[type="checkbox"]:checked {
  background: #2563eb;
}

Kendini test et

appearance: none ne yapar?
- Input'a gölge ekler
- Tarayıcının öntanımlı görünümünü kaldırır
- Kenarlık rengini değiştirir
- Yazı boyutunu büyütür
Cevabı göster

Tarayıcının öntanımlı görünümünü kaldırır — Doğru! appearance: none, tarayıcının çizdiği öntanımlı görünümü sıfırlar.

öntanımlı görünümü kaldır

input[type="checkbox"] {
  ____: none;
  width: 20px;
  height: 20px;
}

Cevabı göster

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
}

Seçim öğelerini eşleştir

checkbox

onay kutusu
radio

seçenek düğmesi
appearance: none

öntanımlıyı sıfırlar
input[type="checkbox"]

öznitelik seçici

Orta seviye bölümündeki tüm dersler

Checkbox ve radio