CSS3 ile Güzel Onay Kutuları ve Radyo Düğmeleri Nasıl Yapılır?

Hepimiz HTML Onay kutularını ve Radyo Düğmelerininin ne olduğunu biliyoruz. Sinir bozucu olan şey, onların görünüşünü değiştirmenin bir yolu yoktur. İşletim sisteminize ve tarayıcınıza bağlı olarak farklı görünür ve CSS kullanarak onları stillemiyoruz. Tasarımları bozmadan bu unsurları çekici kılmak isteyen çoğu tasarımcı için sıkıcı bir iş olabilir. Bu blog yazıda onları nasıl gerçekten hoş yapabileceğinizi göstereceğim. Hadi kazalım!

Güçlü olun. Onay Kutlarınızı gizleyin

Bu mantıksız gelebilir, ancak onay kutularımızı ve radyo düğmelerinin harika görünmesini sağlamak için onları gizlememiz gerekir. Bunun için basit bit kural uygularız:

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}1

Ama onlarsız ne yapacağiz? Endişelenmeyin, blackjack ile kendi onay kutlarımızı oluşturacağiz ve....hadi, sadece içine girelim.

Radyo Düğmeleri

İlk olarak, işaretlememiz var:

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

Üç radyo düğmesi içeren bölümümüz var. Bu derste onay kutularını daha ayrıntılı olarak inceleyeceğiz. İlke aynı. Her giriş, bir div içine sarılır. Ayrıca, her girişte bir açııklık içeren bir etiket bulunur.

Önemli!

Radyo ve onay kutusu girişlerini gizlediğimiz için bunlara erişmemizin tek yolu bir etiketi kullanmaktır. Düzgün çalışması için etiketinin, karşılık gelen benzersiz bir giriş kimliğine sahip "for" özniteliğini içermesi gerekir. Bir girişin "radio-1" kimliği varsa, o zaman "for" özelliği de "radio-1"ye sahip olmalı. Her bir etiketin içindeki metni neden bir açıklığa dönüştürdüğümü merak ediyor olabilirsiniz:

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

":: before and" :: ile radyo düğmelerinin stilini yapacağımız için konumlandırılabilecek bir ana öğeye ihtiyacımız var. Bu durumda, bu bizim etiketimiz olacak:

.container label {
  position: relative;
}

Burada hem onay kutularında hem de radyo düğmelerinde paylaşılan stilleri bulabilirsiniz:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Üst ve alt özellikleri sıfırlayın ve "kenar boşluğu: otomatik" ile birleştirilen öğelerimizin merkezelenmiş bir yatay konuma sahip olmasına izin verin. Başka stilleri şöyle görünür:

.container span.radio:hover {
  cursor: pointer;1
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}2

En önemli kısmı, temel olarak tüm işlemleri yapan son kurallar dizisidir. ": Checked" sözde sınıfı, elemanlarda değişiklik yapmamıza izin verir. Bir '+' seçicisiyle, sonraki kardeş öğeyi seçebilir ve ":: sonra" sözde elemanına yeni kuralar uygulayacağımız span.radio'mızı hedefleyin. Bu durumda yatay pozisyonunu ve rengini değiştiriyoruz.

Onay Kutuları

Özel onay kutuları oluşturmanız gerekiyorsa, yöntem aynıdır. Stillere göz atın:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

Tek fark, FontAwesome ikonlarından :: after" psödo-element olarak bir simge kullanmamızdır. Varsayılan olarak açık, ancak onay kutusu işaretlendiğinde simge mavi olur.

Bir tarafa bakarsak

Sözde elemanınızda bir FontAwesome simgesi kullanmak istiyorsanız, kodunu içerik özelliğine eklemeniz ve font-family özelliğini "FontAwesome" olarak belirtmeniz gerekiyor. Örneğin:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Unicode karakterinden kurtulmak için gerekli olan ters eğik çizgisinden önce gelir. Unicode, seçtiğiniz simgenin sayfasında bulunabilir:

Son sonuç

Bu kadar. Şimdi, kendi projeleriniz için ayarlayabileceğiniz ve kullanabileceğiniz tam fonksiyonlu güzel onay kutuları ve radyo düğmeleri oluşturduk. CodePen demosunda tam kaynak kodunu görebilirsiniz:

Video eğiticileri

Bir kere görmek on kere okumaktan daha iyidir. Bazı insanlar profesyonellerden destek almayı tercih ediyorlar, bu yüzden özel onay kutuları ve radyo düğmeleri oluşturma konusunda en iyi 5 (benim görüşüme göre) video eğitici seçtim. Umarım size yardımcı olurlar.

Bu eğitici faydalı bulduysanız veya herhangi sorularınız varsa, aşağıdaki yorumlar bölümünde düşüncelerinizi paylaşmaktan çekinmeyin. Teşekkür ederiz.