HTML Radyo Düğmelerine Nasıl Stil Verilir: Adım Adım Kılavuz

HTML radyo düğmeleri web formlarının temelini oluşturur, ancak varsayılan görünümleri arzu edilenden çok uzaktır. Bu blog yazısında, CSS kullanarak radyo düğmelerinin görünümünü özelleştirmek için en sevdiğim yöntemlerden birini inceleyerek daha kullanıcı dostu ve görsel olarak çekici bir deneyim yaratacağız.

Radyo Düğmelerini Gizleyerek Başlayalım!

Radyo düğmeleri için tarayıcılar arası stilin sınırlamalarını kabul ederek başlamalıyız. Bunları doğrudan şekillendirememek sinir bozucu olsa da geçici çözümler kullanabiliriz. Bu örnekte ilk adım, gerçek radyo düğmesi girişini gizlemektir. Bunun kulağa tuhaf geldiğini biliyorum ama onlara stil veremeyeceğimizi biliyoruz, bu yüzden onları denklemden çıkarmamız gerekiyor.

Ancak bu, tüm kullanıcılar için işlevsel kalmasını sağlayacak şekilde erişilebilir bir şekilde yapılmalıdır. Bu, kullanılabilirliğini korurken içeriği görsel olarak gizleyen aşağıdaki stiller kullanılarak elde edilebilir:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Özel Radyo Düğmeleri Oluşturma

Radyo düğmesinin özel görünümünü oluşturmak için, aradığımız görünümü oluşturmak için etiketimizin üzerindeki ::before sözde elemanından ve bazı basit CSS'lerden yararlanacağız.

Örneğimiz için HTML şöyle görünür:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Başlamak için etiket öğemize aşağıdaki stilleri ekleyeceğiz:

 label { display: inline-flex; align-items: center; }

Bu, radyo düğmesi stillerimizi eklediğimizde bunun etiket metniyle dikey olarak düzgün şekilde hizalanmasını sağlayacaktır.

Şimdi ::before sözde öğesini kullanarak sahte radyo düğmelerimizi ekleyeceğiz:

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

Bu noktada radyo butonu listesine benzemeye başlayan bir şeyle karşı karşıyayız ancak radyolara tıklarsak hiçbir şeyin olmadığını göreceğiz. Sözde öğe görsel olarak bir radyo düğmesine benzese de, kontrol durumunu henüz işlemediğimiz için etkileşimden yoksundur.

Etkileşimi ve Durumları Ele Alma

İşaretli durumu, etiketimiz üzerindeki :checked sözde sınıf ve bitişik kardeş seçiciyle halledebiliriz:

 input[type="radio"]:checked + label { color: black; }

İç nokta için sözde elementimizde radyal bir degradeden yararlanabiliriz:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Artık bunlara tıkladığımızda, yerel radyo düğmeleri gibi işlev görüyorlar. Ayrıca bazı geçiş efektleri ekleyerek etkileşimleri geliştirebiliriz:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

Odaklanmayı Unutmayalım

Erişilebilirliği geliştirmek için sahte radyo düğmelerinin odaklanmış durumunu da ele almamız gerekecek. Bu sefer :focus sözde sınıfını ve bitişik kardeş seçiciyi şu etiketle kullanmamız gerekecek:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Çözüm

Bu yöntemi izleyerek kullanıcı deneyimini büyük ölçüde geliştiren şık ve erişilebilir özel radyo düğmeleri oluşturabiliriz. Bu özelleştirilmiş radyo düğmeleri yalnızca standart olanlardan daha iyi görünmekle kalmaz, aynı zamanda doğru şekilde uygulandığında daha iyi geri bildirim ve etkileşim de sağlayabilir.

Bu, yerel tarayıcı stillerinden çok da farklı görünmeyebilecek oldukça basit bir örnekti, ancak önemli olan şu ki, bu kurulumla hemen hemen istediğimiz her şeyi yapabiliriz. Bu nedenle stilleri denemekten ve bunları projenizin tasarımına uyarlamaktan çekinmeyin.

Bunu Çalışırken Görmek İster misiniz?

Aşağıdaki kod kalemi örneğinde bu tekniğin demo kodunu ve örneklerini inceleyin. Herhangi bir sorunuz veya düşünceniz varsa yorum bırakmaktan çekinmeyin.

Biraz yaratıcılık ve biraz CSS ile, erişilebilirliği ve kullanılabilirliği korurken HTML radyo düğmelerinin görünümünü tasarımınıza uyacak şekilde dönüştürebileceğinizi unutmayın!