Saf CSS Özel Onay Kutusu Stili

Aşağıdakilerle birlikte saf CSS’de özel, tarayıcılar arası, temaya uygun, ölçeklenebilir onay kutuları oluşturacağız:

  • currentColor ve tema yeteneği için CSS özel özellikleri
  • em göreceli boyutlandırma birimleri
  • için sözde öğelerin kullanılması :checked gösterge
  • Girişi ve etiketi hizalamak için CSS ızgara düzeni

Buradaki kavramların çoğu bizimkiyle örtüşüyor. özel tarz radyo düğmeleri için stil eklenmesiyle 18. bölümden itibaren :disabled durum

Ş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.

İçinde radyo düğmeleri makalesinde, giriş alanlarını işaretlemenin iki geçerli yolunu araştırdık. O zamanki gibi, etiketin girdiyi sardığı yöntemi seçeceğiz.

Hem denetlenmemiş hem de denetlenmiş bir durumu test etmek için temel HTML’miz:

<label class="form-control">
<input type="checkbox" name="checkbox" />
Checkbox
</label>

<label class="form-control">
<input type="checkbox" name="checkbox-checked" checked />
Checkbox - checked
</label>

Yerel Onay Kutularıyla İlgili Sık Karşılaşılan Sorunlar

Radyo düğmelerinde olduğu gibi, onay kutusunun görünümü tarayıcılar arasında farklılık gösterir.

Chrome, Firefox ve Safari’de (soldan sırayla) temel stiller şunlardır:

Chrome, Firefox ve Safari'de varsayılan onay kutuları

Ayrıca radyo düğmelerinde olduğu gibi, onay kutusu da font-size.

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

  • ile ölçeklendir font-size etikete sağlanan
  • 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

Stillerimiz aynı değişkenle başlayacak ve radyo düğmeleri

Etiketimiz sınıfını kullanır .form-control. Buraya ekleyeceğimiz temel stiller, yazı tipi stilleridir. Daha önce hatırlayın, font-size onay kutusunun 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;
}

Pekala, şimdi onay kutusunu özel kontrolümüz olacak şekilde yeniden şekillendirmeye başlayacağız.

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 Onay Kutusu Girişini Gizle

Yerel onay kutusu giriş stillerini sıfırlamamız gerekiyor, ancak uygun klavye etkileşimini sağlamak ve ayrıca erişim sağlamak için etkileşimli tutmamız gerekiyor. :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 onay kutusu girişini gizleme” için CSS
input[type="checkbox"] {
-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ş Onay Kutusu Stilleri

Özel onay kutumuz 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. Biz de özelleştiriyoruz border-radius diğeriyle birlikte em göreceli stil.

“Özel işaretlenmemiş onay kutusu stilleri” için CSS
input[type="checkbox"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 0.15em;
transform: translateY(-0.075em);
}

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

Stil güncellemelerimiz, uygulayarak onay kutularımız arasında biraz boşluk bırakmak için bir kural içerir. margin-top yardımıyla komşu kardeş birleştirici.

Son olarak, makalemizde tartışıldığı gibi radyo düğmesi eğitimibir kullanarak etiket ve onay kutusu hizalaması üzerinde küçük bir ayarlama yaparız. transform kenarlığın genişliğinin yarısı kadar dürtmek için.

3. Adım: Şekillendirme :checked vs İşaretlenmemiş Durum

Gelen sözde öğeye hazırlanmak için, önce girdinin görüntüleme davranışını grid kullanacak şekilde değiştirmemiz gerekir.

input[type="checkbox"] {

display: grid;
place-content: center;
}

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

Şimdi bizim getirme zamanı ::before temsil etmek için stillendirilecek sözde öğe :checked durum. biz yaratırız :before bir geçiş dahil olmak üzere ve dönüşümü kullanarak öğeyi gizleyin scale(0):

input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
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 onay kutusunun durumunu değiştirdiğinizden emin olun!

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

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

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

Yüksek Kontrast Temaları ve Zorunlu Renkler

Radyo düğmeleri eğitiminde incelendiği gibi, telsizimizin yanıt vermesini sağlamamız gereken bir durum daha, duyabileceğiniz şey olarak anılacaktır. “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ı.

Dan beri box-shadow kaldırıldığından emin olacağız :checked durumu sağlayarak görünür 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="checkbox"]::before {


background-color: CanvasText;
}

“Onay İşareti” Şekli Oluşturma

Şu anda, doldurulmuş durumda sorun yok, ancak daha beklenen modele uyması için bir onay işareti olarak şekillendirilmesi ideal olacaktır.

Burada bir SVG’yi arka plan görüntüsü olarak getirmek gibi birkaç seçeneğimiz var. Ancak bu çözüm, girdilerimizin “teması” için güvendiğimiz CSS özel özelliklerine erişimi kaybetmek anlamına gelir.

Bunun yerine, varsayılan kutuyu kullanarak yeniden şekillendireceğiz. clip-path Emlak. Bu özellik, sözde elemanın kutusunu, kalem aracıyla yeniden şekillendirilen bir vektör elemanına benzer şekilde ele almamızı sağlar. Aradaki şekli yeniden çizmek için koordinatları tanımlarız. Kullanabilirsiniz bu kullanışlı klip yolu oluşturucu kendi şekillerinizi çizmek veya ortak olanları anında almak için. biz de kullanıyoruz clip-path Oluşturmak için özel seçim açılır oku.

Tercih meselesi olarak, ben de değiştiririm transform-origin değerini kullanmak bottom left varsayılan yerine center bir tür “check-in” animasyonunu taklit etmek için.

“Klip yolu ile bir onay işareti oluşturmak” için CSS
input[type="checkbox"]::before {

transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

4. Adım: :focus durum

Bu öğreticinin önceki sürümünde, box-shadowancak şimdi mütevazi kişiler için geliştirilmiş iki özelliğimiz var. outline. İlk olarak, kullanabiliriz outline-offset giriş ve anahat arasında biraz boşluk oluşturmak için. İkincisi, her zaman yeşil kalan tarayıcılar artık destekleniyor outline Takip etmek border-radius!

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="checkbox"]:focus {
outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em);
}

Bu, onay kutusu için kritik stillerimizi sonlandırıyor. Etikete stil vermek için ek bir yöntemle ilgileniyorsanız, radyo düğmesi eğitimi kullanmayı öğrenmek için :focus-within.

Stiller :disabled onay kutuları

Radyo düğmeleri eğitiminde bulunmayan bir adım, :disabled durum.

Bu, önceki durumlarımıza benzer bir desen izleyecektir, buradaki değişiklik çoğunlukla rengi griye güncellemektir. İlk önce ana öğeyi yeniden atadık --form-control-color yeniye --form-control-disabled değişken. Ardından, color devre dışı bırakılan rengi kullanma özelliği.

“:devre dışı durum stilleri” için CSS
:root {
--form-control-disabled: #959495;
}

input[type="checkbox"]:disabled {
--form-control-color: var(--form-control-disabled);

color: var(--form-control-disabled);
cursor: not-allowed;
}

Ayrıca imleci ayarlamak için güncelledik not-allowed bu girdilerin şu anda etkileşimli olmadığına dair ek bir görsel işaret olarak.

Ama bir engele çarptık. Etiket ana öğe olduğundan, şu anda yalnızca CSS’de onu aşağıdakilere göre biçimlendirmek için bir yolumuz yok. :disabled durum.

Yalnızca CSS çözümü için, onay kutusunun devre dışı bırakıldığı bilindiğinde etikete fazladan bir sınıf eklememiz gerekir. Bu durum kullanıcı tarafından değiştirilemediğinden, bu genellikle kabul edilebilir bir ek adım olacaktır.

“:devre dışı durum stilleri” için CSS
.form-control--disabled {
color: var(--form-control-disabled);
cursor: not-allowed;
}

İşte aşağıdakileri içeren bir demo :disabled stilleri ve ayrıca CSS değişkenlerinin gücünün + kullanımının nasıl olduğunu gösterir. currentColor basit bir satır içi stille bireysel bir onay kutusunu yeniden temalandırabileceğimiz anlamına gelir. Bu, bir hata durumuna hızlı geçiş gibi şeyler için çok kullanışlıdır.

Stephanie Eckles (@5t3ph)

Bir cevap yazın

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