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.   https://youtu.be/PlldXyuTnUw?embedable=true  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   sözde elemanından ve bazı basit CSS'lerden yararlanacağız. ::before  Ö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   sözde öğesini kullanarak sahte radyo düğmelerimizi ekleyeceğiz: ::before   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   sözde sınıf ve bitişik kardeş seçiciyle halledebiliriz: :checked   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   sözde sınıfını ve bitişik kardeş seçiciyi şu etiketle kullanmamız gerekecek: :focus   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!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps