CSS

Saf CSS Özel Tarz Radyo Düğmeleri

Aşağıdaki özelliklerin bir kombinasyonunu kullanarak, saf CSS’de özel, erişilebilir, tarayıcılar arası, temaya uygun, ölçeklenebilir radyo düğmeleri oluşturabiliriz:

  • currentColor tema yeteneği için
  • em göreceli boyutlandırma birimleri
  • appearance: none tam yeniden şekillendirme erişimi için
  • Girişi ve etiketi hizalamak için CSS ızgara düzeni

Önüne bak: Bu tarzların çoğu, şuradaki bölümle örtüşüyor: özel onay kutusu stilleri bundan sonra okumak ilginizi çekebilir!

Şimdi uygun: benim yumurta kafalı video kursum Erişilebilir Çapraz Tarayıcı CSS Form Stili. Bu eğitimde açıklanan teknikleri, projeleriniz arasında genişletmek için temaya uygun bir form tasarım sistemi oluşturarak bir sonraki seviyeye taşımayı öğreneceksiniz.

HTML’de radyo düğmelerini yerleştirmenin iki uygun yolu vardır.

İlk sarar input içinde label. Bu, etiketi dolaylı olarak etiketlediği girdiyle ilişkilendirir ve ayrıca radyoyu seçmek için isabet alanını artırır.

<label>
<input type="radio" name="radio" />
Radio label text
</label>

İkincisi, sahip olmak input ve label kardeş ol ve kullan for radyonun değerine ayarlanan özellik id dernek oluşturmak.

<input type="radio" name="radio" id="radio1" />
<label for="radio1">Radio label text</label>

Tekniğimiz her iki kurulumda da çalışacak, ancak fazladan bir div eklemeyi önlemek için sarma etiketi yöntemini seçeceğiz.

Sınıfları ve iki radyoyu içeren demomuzun temel HTML’si – test etmek için gerekli :checked kontrol edilmeyen durumlara karşı – şudur:

<label class="form-control">
<input type="radio" name="radio" />
Radio
</label>

<label class="form-control">
<input type="radio" name="radio" />
Radio - checked
</label>

Radyo düğmesi grupları için aynısını sağlamak da gereklidir. name bağlanmak.

Chrome’daki yerel HTML öğeleri şu şekilde görünür:

Chrome'da yerel radyo düğmeleri

Yerel Radyo Düğmeleriyle İlgili Genel Sorunlar

Geliştiricilerin radyo düğmeleri için özel bir stil çözümü aramasına neden olan birincil sorun, mobil tarayıcılar dahil edildiğinde artan tarayıcılar arasındaki görünüm farklılıklarıdır.

Örnek olarak, Firefox’un (solda), Chrome’un (ortada) ve Safari’nin (sağda) Mac sürümlerinde gösterildiği gibi radyo düğmeleri şunlardır:

Firefox, Chrome, Safari'deki radyo düğmeleri

Çözümümüz aşağıdaki hedefleri gerçekleştirecektir:

  • ile ölçeklendir font-size sağlanan label
  • tema yeteneği kolaylığı için etikette sağlananla aynı rengi elde edin
  • dahil olmak üzere tutarlı, tarayıcılar arası bir tasarım stili elde edin. :focus durum
  • klavye ve renk kontrastı erişilebilirliğini koruyun

Birincil hedefiniz değiştirmek ise :checked durum rengi, hakkında daha fazla bilgi edinmek ilginizi çekebilir yaklaşan accent-color Emlak Michelle Barker’ın genel bakışından.

Tema Değişkeni ve box-sizing Sıfırla

Basamağımızda ilk olarak yerleştirilmesi gereken iki temel CSS kuralı vardır.

İlk olarak, adında bir özel değişken oluşturuyoruz. --color radyo düğmelerimizi kolayca temalandırmanın basit bir yolu olarak kullanacağız.

:root {
--form-control-color: rebeccapurple;
}

Ardından, sıfırlamak için evrensel seçiciyi kullanıyoruz. box-sizing kullanılan yöntem border-box. Bu, hesaplanan boyutu herhangi bir ayar boyutunun ötesinde artırmak yerine, son boyut hesaplanan herhangi bir öğenin hesaplanmasına dolgu ve kenarlığın dahil edileceği anlamına gelir.

*,
*:before,
*:after
{
box-sizing: border-box;
}

Etiketimiz sınıfını kullanır .form-control. Buraya ekleyeceğimiz temel stiller, yazı tipi stilleridir. Daha önce hatırlayın, font-size radyonun görsel boyutu üzerinde henüz bir etkisi olmayacak input.

“.form-control yazı tipi stilleri” için CSS
.form-control {
font-family: system-ui, sans-serif;
font-size: 2rem;
font-weight: bold;
line-height: 1.1;
}

Anormal derecede büyük kullanıyoruz font-size sadece öğretici demo amacıyla görsel değişiklikleri vurgulamak için.

Etiketimiz aynı zamanda tasarımımız için yerleşim kabıdır ve bundan yararlanmak için onu CSS ızgara düzenini kullanacak şekilde ayarlayacağız. gap.

“.form-control ızgara düzeni” için CSS
.form-control {
font-family: system-ui, sans-serif;
font-size: 2rem;
font-weight: bold;
line-height: 1.1;
display: grid;
grid-template-columns: 1em auto;
gap: 0.5em;
}

Özel Radyo Düğmesi Stili

Tamam, buraya bunun için geldiğin kısım burası!

Bu öğreticinin orijinal versiyonu, istenen efekti elde etmek için ekstra öğelerin kullanımını gösterdi. gelişmiş desteği sayesinde appearance: none ve takdirle Scott O’Hara’nın radyo düğmeleri ve onay kutularını şekillendirme hakkındaki gönderisibunun yerine sözde öğelere güvenebiliriz!

1. Adım: Yerel Radyo Girişini Gizleyin

Yerel radyo girişini gizlememiz gerekiyor, ancak uygun klavye etkileşimini sağlamak ve aynı zamanda :focus durum.

Bunu başarmak için sadece ayarlamamız gerekiyor appearance: none. Bu, neredeyse tüm miras alınan tarayıcı stillerini kaldırır ve girdinin sözde öğelerini şekillendirmemize erişim sağlar. Sıfırlamayı tamamlamak için iki ek özelliğimiz olduğuna dikkat edin.

“Yerel radyo girişini gizleme” için CSS
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
margin: 0;
}

Destek konusunda endişeli? Bu kullanım kombinasyonu appearance: none ve girişin sözde öğelerini stillendirme yeteneği, 2017’den beri Chrome, Safari ve Firefox’ta ve Edge’de Mayıs 2020’de Chromium’a geçişlerinden bu yana desteklenmektedir.

2. Adım: Özel İşaretlenmemiş Radyo Tarzları

Özel radyomuz için temel giriş öğesindeki kutu stillerini güncelleyeceğiz. Bu, aşağıdakilerin kullanılmasını sağlamak için yazı tipi stillerini devralmayı içerir. em kullanmanın yanı sıra istenen boyutlandırma sonucunu üretir currentColor etiketin rengindeki herhangi bir güncellemeyi devralmak için.

Kullanırız em için width, heightve border-width göreli görünümü korumak için değer. iyi ole border-radius: 50% elemanı bir daire olarak işleyerek beklenen görünümü tamamlar.

“Özel işaretlenmemiş radyo stilleri” için CSS
input[type="radio"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 50%;
}

.form-control + .form-control {
margin-top: 1em;
}

Son olarak, telsizlerimiz arasında biraz boşluk sağlamak için küçük bir stilde kaydırdık. margin-top yardımıyla komşu kardeş birleştirici;

3. Adım: Girdi ve Etiket Hizalamasını İyileştirin

Grid veya flexbox ile çalıştıysanız, şu anda içgüdünüz uygulamak olabilir. align-items: center etiket metnine göre girişin hizalamasını optik olarak ayarlamak için.

Peki ya etiket birden çok satıra bölünecek kadar uzunsa? Bu durumda, yatay merkez boyunca hizalama istenmeyebilir.

Bunun yerine, girişin etiket metninin ilk satırına göre yatay olarak ortalanması için ayarlamalar yapalım.

Girişimizde kullanacağız transform öğeyi yukarı itmek için. Bu biraz sihirli bir sayıdır, ancak başlangıç ​​noktası olarak bu değer, uygulanan sınırın yarısı kadardır.

“Girdi ile etiket hizalamasını iyileştir” için CSS
input[type="radio"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 50%;
transform: translateY(-0.075em);
}

Ve bununla birlikte, hem tek satırlı hem de çok satırlı etiketler için hizalamamız eksiksiz ve işlevseldir.

4. Adım: :checked Durum

Şimdi bizim getirme zamanı ::before temsil etmek için stillendirilecek sözde öğe :checked durum.

bu :checked adlandırma kuralı burada biraz kafa karıştırıcı olabilir, ancak hem radyo düğmeleri hem de onay kutuları için kullanılabilen bir CSS seçicidir.

Izgarayı kullanmak için önce girdinin görüntüleme davranışını değiştirmemiz gerekiyor:

input[type="radio"] {

display: grid;
place-content: center;
}

hizalamanın en hızlı yolu budur. :before özel kontrolümüzün yatay ve dikey merkezine.

Ardından, oluşturduğumuz :before bir geçiş dahil olmak üzere ve dönüşümü kullanarak öğeyi gizleyin scale(0):

input[type="radio"]::before {
content: "";
width: 0.65em;
height: 0.65em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-control-color);
}

Kullanımı box-shadow onun yerine background-color yazdırıldığında radyonun durumunun görünmesini sağlar (h/t Alvaro Montoro).

Son olarak, ne zaman input dır-dir :checkedile görünür hale getiriyoruz. scale(1) sayesinde güzel animasyonlu bir sonuçla transition. Animasyonu görmek için radyolar arasında tıkladığınızdan emin olun!

“:kontrol edilen durum stilleri” için CSS
input[type="radio"] {
display: grid;
place-content: center;
}

input[type="radio"]::before {
content: "";
width: 0.65em;
height: 0.65em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-control-color);
}

input[type="radio"]:checked::before {
transform: scale(1);
}

Yüksek Kontrast Temaları ve Zorunlu Renkler

Telsizimizin yanıt vermesini sağlamamız gereken bir durum daha, duyabileceğiniz şeydir. “Windows Yüksek Karşıtlık Modu” (WHCM). Bu modda, kullanıcının işletim sistemi, azaltılmış bir palet için renkle ilgili özellikleri değiştirir. “zorunlu renkler” olarak adlandırılan CSS spesifikasyonunun gelen bir parçası.

Bu modda, bizim box-shadow tamamen kaldırılır ve bu kullanıcıları kontrol edilen durum göstergesi olmadan bırakır.

Neyse ki, bunu çözmek, yalnızca bir ekstra özellik eklemeyi içerir. biz sağlayacağız background-colornormalde zorunlu renkler modunda kaldırılır, ancak tanımlanan zorunlu renklerden birini kullanırsak korunur. Bu durumda seçiyoruz CanvasText normal gövde metni rengiyle eşleşecek.

Stil istifleme düzeni nedeniyle, bizim box-shadow normal modda kullanmak için temalandırdığımız aslında görsel olarak yerleştirilmiş üzerinde en background-coloryani her ikisini de daha fazla değişiklik yapmadan kullanabiliriz.

“Zorunlu renkleri desteklemek” için CSS
input[type="radio"]::before {


background-color: CanvasText;
}

Adım 5: :focus Durum

Tarayıcınıza bağlı olarak, zaten bir tür odak stili olarak sağlanan bir odak stili görüyor olabilirsiniz. outline. Girdimizin rengine uyması için küçük bir özelleştirme ekleyeceğiz ve kullanarak girdiden biraz boşluk sağlayacağız. outline-offset.

Bu, kullanılan bu öğreticinin önceki sürümünden bir basitleştirmedir. box-shadow. Artık her zaman yeşil kalan tarayıcıların tümü outline hangi izler border-radiussadece kullanmamak için bir bahaneyi ortadan kaldırmak outline!

Unutma: :focus geçici bir durumdur, ancak form denetimlerinizin ve diğer etkileşimli öğelerinizin erişilebilirliğini sağlamak için yüksek düzeyde görünür olması çok önemlidir.

“:odak durumu stilleri” için CSS
input[type="radio"]:focus {
outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em);
}

Ve bununla birlikte, özel bir radyo düğmesi için temel stiller tamamlandı! 🎉

Deneysel: Kullanma :focus-within Etiket Metnine Stil Vermek için

Etiket, yerel girdinin kardeşi olmadığı için, etiketi kullanamayız. :focus stil vermek için girişin durumu.

Yaklaşan bir sözde seçici :focus-withinve bir özelliği, odak almış bir öğeyi içeren öğelere stiller uygulayabilmesidir.

ModernCSS bölümü bir saf CSS erişilebilir açılır gezinme menüsü ayrıca kaplı :focus-within.

Şimdilik, herhangi bir kritik kullanım :focus-within gerektiren çoklu dolgubu nedenle aşağıdaki stiller bir geliştirme olarak düşünülmeli ve görsel bir odak göstergesi sağlamanın tek yolu olarak kullanılmamalıdır.

için bir kural ekleyerek odaklanmayı test edeceğiz. :focus-within etikette (.form-control). Bu, bir alt öğe olan ve dolayısıyla etiketin “içinde” olan yerel girdinin odak aldığında, stil verebileceğimiz anlamına gelir. hiç odak etkinken etiket içindeki öğe.

“Deneysel: odak içinde stiller” için CSS
.form-control:focus-within {
color: var(--form-control-color);
}

İşte bir CodePen’de çatallayabileceğiniz ve daha fazla deneyebileceğiniz çözüm.

Stephanie Eckles (@5t3ph)

Kontrol et özel onay kutusu stili ayrıca stilleri nasıl genişleteceğinizi öğrenmek için :disabled durumu ve nasıl çalışılacağını görün clip-path olarak :checked gösterge.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Göz Atın
Kapalı
Başa dön tuşu