Seçim Menüler ve Onay Kutuları
Yerel seçim açılır menülerini ve onay kutularını stillendirin; tarayıcılar arası form stillerini normalleştirmek için @tailwindcss/forms eklentisini kullanın.
Seçim Menüler ve Onay Kutuları, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Yerel Form Denetimlerinin Zorluğu
Yerel <select>, <checkbox> ve <radio> öğelerini tarayıcılar arasında tutarlı biçimde stillendirmek oldukça zordur. Varsayılan olarak bu öğeler, appearance CSS özelliğini kullanarak işletim sisteminin görünümünü devralır; Tailwind ise bu görünümü appearance-none yardımcı sınıfıyla sıfırlar.
Yerel görünümü kaldırdıktan sonra stillendirme üzerinde tam denetim kazanırsınız. @tailwindcss/forms eklentisi bu sıfırlamayı tüm form öğeleri için otomatikleştirir ve her yere elle appearance-none eklemeden tarayıcılar arası temiz bir temel sunar.
<!-- Without plugin: manual appearance reset needed -->
<select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg">
<option>Option A</option>
</select>
<!-- With @tailwindcss/forms plugin: already normalized -->
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg">
<option>Option A</option>
</select>Seçim Menüsünü Stillendirme
Stillendirilmiş seçim alanı, metin girişiyle aynı temel sınıfları kullanır: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Arka plan SVG görselini konumlandırarak veya mutlak konumlandırılmış bir SVG simgesini üstüne yerleştirerek özel bir açılır menü oku ekleyin.
Odak durumu, bilinen focus:outline-none focus:ring-2 focus:ring-blue-500 sınıflarını kullanır. Fare imlecinin tıklamanın bir menü açtığını belirtmesi için cursor-pointer ekleyin.
<div class="relative">
<select
class="w-full appearance-none px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg cursor-pointer
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
</select>
<!-- Custom dropdown arrow -->
<div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</div>
</div>Form Eklentisini Kurma
@tailwindcss/forms eklentisi, tüm yerel form öğeleri için belirlenmiş bir sıfırlama sağlar. npm install -D @tailwindcss/forms komutuyla kurun ve tailwind.config.js içindeki plugins dizisine ekleyin.
Kurulumdan sonra tüm girişler, seçim alanları, metin alanları, onay kutuları ve radyo düğmeleri tutarlı bir temel stil alır. Ardından tarayıcı varsayılanlarıyla uğraşmadan Tailwind yardımcı sınıflarını bunun üzerine ekleyebilirsiniz. Eklentinin yalnızca belirli bir sınıf eklediğinizde uygulanmasını istiyorsanız require('@tailwindcss/forms')({ strategy: 'class' }) kullanın.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
// Or with class strategy:
// require('@tailwindcss/forms')({ strategy: 'class' }),
],
}Onay Kutularını Stillendirme
Formlar eklentisiyle onay kutuları zaten normalleştirilir. Daha sonra yardımcı sınıflarla boyutlarını, renklerini ve köşe yuvarlaklıklarını özelleştirebilirsiniz. w-4 h-4 rounded text-blue-600 border-gray-300 kullanın — onay kutusundaki text-blue-600, onay işaretinin dolgu rengini belirler.
Onay kutusunu yatay hizalamak için flex items-center gap-2 kullanarak bir etiketle eşleştirin. Etiket metni için text-sm font-medium text-gray-700 kullanılır.
<div class="flex items-center gap-2">
<input
id="terms"
type="checkbox"
class="w-4 h-4 rounded text-blue-600 border-gray-300
focus:ring-blue-500 focus:ring-2 cursor-pointer"
/>
<label for="terms" class="text-sm font-medium text-gray-700 cursor-pointer">
I agree to the <a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a>
</label>
</div>Çoklu Seçim için Onay Kutusu Listesi
Onay kutusu listesi, kullanıcıların birden fazla seçenek belirlemesine olanak tanır. Birden fazla onay kutusu öğesini kapsayıcıda space-y-3 kullanarak alt alta yerleştirin. Erişilebilirlik için bunları bir <fieldset> içinde, <legend> kullanarak gruplayın.
Legend, ekran okuyucular için grubun tamamını tanımlar. Tek tek etiketler ise for/id öznitelikleri aracılığıyla kendi onay kutularıyla ilişkilendirilir.
<fieldset>
<legend class="text-sm font-semibold text-gray-900 mb-3">Notification preferences</legend>
<div class="space-y-3">
<div class="flex items-center gap-2">
<input id="email-notif" type="checkbox" checked class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="email-notif" class="text-sm text-gray-700">Email notifications</label>
</div>
<div class="flex items-center gap-2">
<input id="push-notif" type="checkbox" class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="push-notif" class="text-sm text-gray-700">Push notifications</label>
</div>
<div class="flex items-center gap-2">
<input id="sms-notif" type="checkbox" class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="sms-notif" class="text-sm text-gray-700">SMS notifications</label>
</div>
</div>
</fieldset>Radyo Düğmelerini Biçimlendirme
Radyo düğmeleri, onay kutularıyla aynı şekilde biçimlendirilir; ancak tekli seçimle ilişkilendirilen dairesel görünümü korumak için rounded yerine rounded-full kullanılır. Dolgu rengi için kullanılan text-blue-600 yaklaşımı burada da geçerlidir.
Aynı gruptaki tüm radyo düğmeleri aynı name özniteliğini paylaşmalıdır; böylece tarayıcı tekli seçim kısıtlamasını uygular.
<fieldset>
<legend class="text-sm font-semibold text-gray-900 mb-3">Plan</legend>
<div class="space-y-2">
<div class="flex items-center gap-2">
<input id="plan-starter" type="radio" name="plan" value="starter"
class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="plan-starter" class="text-sm text-gray-700">Starter — Free</label>
</div>
<div class="flex items-center gap-2">
<input id="plan-pro" type="radio" name="plan" value="pro" checked
class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="plan-pro" class="text-sm text-gray-700">Pro — $29/mo</label>
</div>
<div class="flex items-center gap-2">
<input id="plan-enterprise" type="radio" name="plan" value="enterprise"
class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
<label for="plan-enterprise" class="text-sm text-gray-700">Enterprise — Custom</label>
</div>
</div>
</fieldset>Kart Biçimli Radyo Grubu
Kart biçimli radyo grubu, her seçeneği çıplak bir radyo düğmesi göstermek yerine tıklanabilir bir kartın içine yerleştirir. Radyo girdisini görsel olarak gizleyin, ancak erişilebilir tutun ve kartı girdinin işaretlenme durumuna göre biçimlendirmek için peer yardımcı sınıfını kullanın.
Kardeş etiket kartındaki peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600, JavaScript gerektirmeden vurgulanmış bir seçim durumu oluşturur.
<div class="grid grid-cols-3 gap-3">
<label class="cursor-pointer">
<input type="radio" name="tier" value="starter" class="sr-only peer" />
<div class="border-2 border-gray-200 rounded-lg p-4 text-center
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600
hover:border-gray-300 transition-colors">
<p class="font-semibold text-gray-900">Starter</p>
<p class="text-sm text-gray-500">Free</p>
</div>
</label>
<label class="cursor-pointer">
<input type="radio" name="tier" value="pro" class="sr-only peer" checked />
<div class="border-2 border-gray-200 rounded-lg p-4 text-center
peer-checked:border-blue-600 peer-checked:ring-2 peer-checked:ring-blue-600
hover:border-gray-300 transition-colors">
<p class="font-semibold text-gray-900">Pro</p>
<p class="text-sm text-gray-500">$29/mo</p>
</div>
</label>
</div>Açma-Kapama Anahtarı Bileşeni
Açma-kapama anahtarı, kaydırmalı bir açma/kapama anahtarına benzeyen, biçimlendirilmiş bir onay kutusudur. Bunu sr-only içeren bir <input type='checkbox'> ve canlandırma için peer-checked yardımcı sınıflarını kullanan kardeş bir <div> ile oluşturun.
Ray için w-11 h-6 bg-gray-200 rounded-full, düğme için mutlak konumlandırılmış w-4 h-4 bg-white rounded-full shadow kullanılır. peer-checked:translate-x-5 yardımcı sınıfı, düğme işaretlendiğinde onu sağa kaydırır.
<label class="flex items-center gap-3 cursor-pointer">
<div class="relative">
<input type="checkbox" class="sr-only peer" />
<div class="w-11 h-6 bg-gray-200 rounded-full transition-colors duration-200
peer-checked:bg-blue-600"></div>
<div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow
transition-transform duration-200 peer-checked:translate-x-5"></div>
</div>
<span class="text-sm font-medium text-gray-700">Enable notifications</span>
</label>Aramalı Özel Seçim Alanı
Yerel <select> aramayı desteklemez. Aranabilir açılır listeler için girdi + liste birleşiminden oluşan özel bir yapı kullanın. Kullanıcının yazacağı bir metin girdisi gösterin ve aşağıdaki görünür <ul> öğesini JavaScript ile filtreleyin.
Açılır listeyi girdinin hemen altında doğru konumlandırmak için absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto z-10 ile biçimlendirin.
<div class="relative">
<input
type="text"
placeholder="Search country..."
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<ul class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200
rounded-lg shadow-lg max-h-48 overflow-y-auto z-10">
<li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">Germany</li>
<li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">France</li>
<li class="px-3 py-2 text-sm text-blue-600 font-medium bg-blue-50 cursor-pointer">United Kingdom</li>
<li class="px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer">United States</li>
</ul>
</div>Devre Dışı Onay Kutusu ve Seçim Alanı
Devre dışı onay kutuları ve seçim alanları disabled: varyantını kullanır. Onay kutuları için disabled:opacity-50 disabled:cursor-not-allowed, öğeyi soluklaştırır. Seçim alanları için bunları disabled:bg-gray-50 ile birleştirerek devre dışı metin girdisi biçimine uyun.
HTML disabled özniteliğini her zaman ekleyin — Tailwind'in disabled: varyantları yalnızca bu öznitelik öğede bulunduğunda etkinleşir.
<!-- Disabled checkbox -->
<div class="flex items-center gap-2">
<input
type="checkbox"
disabled
class="w-4 h-4 rounded border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
/>
<label class="text-sm text-gray-400">Unavailable option</label>
</div>
<!-- Disabled select -->
<select
disabled
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed">
<option>Disabled option</option>
</select>Aralık Girdisini Biçimlendirme
<input type='range'> öğesi bir kaydırıcı oluşturur. Formlar eklentisiyle, rayı ve tutamacı accent-blue-600 kullanarak biçimlendirebilirsiniz. Bu, aralık kaydırıcıları, ilerleme çubukları ve onay kutuları gibi yerel denetimlerin rengini tek bir yardımcı sınıfla belirleyen bir CSS özelliğidir.
accent-blue-600, yerel kaydırıcıları tamamen özel bileşenlerle değiştirmeden markanıza uygun hale getirmenin en basit yoludur.
<div class="flex flex-col gap-1">
<label for="volume" class="text-sm font-medium text-gray-700">Volume: <span id="vol">50</span>%</label>
<input
id="volume"
type="range"
min="0"
max="100"
value="50"
oninput="document.getElementById('vol').textContent = this.value"
class="w-full h-2 accent-blue-600 cursor-pointer"
/>
</div>Hızlı Kontrol
Bu dersteki Tailwind CSS Uzmanlığı kavramlarını ne kadar anladığınızı sınayın.
Ders Özeti
Bu derste şunları öğrendiniz: @tailwindcss/forms eklentisi, temiz bir biçimlendirme temeli sağlayarak yerel form öğelerini tarayıcılar arasında normalleştirir; onay kutuları ve radyo düğmeleri, dolgu rengini belirlemek için text-blue-600, odak halkaları için focus:ring-blue-500 kullanır; ayrıca peer yardımcı sınıfı, işaretlenme durumuna JavaScript olmadan tepki veren kart biçimli radyo grupları ve açma-kapama anahtarları oluşturmayı sağlar. Sırada form yerleşimi kalıplarını biçimlendireceğiz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Seçim Menüler ve Onay Kutuları” dersi ücretsiz mi?
Evet — “Seçim Menüler ve Onay Kutuları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Seçim Menüler ve Onay Kutuları” dersinde ne öğreneceğim?
Yerel seçim açılır menülerini ve onay kutularını stillendirin; tarayıcılar arası form stillerini normalleştirmek için @tailwindcss/forms eklentisini kullanın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Seçim Menüler ve Onay Kutuları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Metin Girdilerini ve Metin Alanlarını Stillendirme
- Seçim Menüler ve Onay Kutuları
- Form Düzeni Kalıpları
- Doğrulama ve Hata Durumları