Custom Radio Button yani özel radyo düğmelerini birden fazla seçenek içerisinden kullanıcının sadece birini seçmesini istediğimiz durumlarda kullanıyoruz.
Örneğin kullanıcıdan bir form doldurmasını istediğimizi düşünelim. Radio button’ları en çok kullandığımız yer, kullanıcının form’da cinsiyet seçeceği kısım oluyor. Seçeneklere Bay ve Bayan ekliyoruz ve sadece bunlardan birini seçmesini istiyoruz. Veya birçok yazılım dilini (C#, Java vb..) seçenek olarak sunup en iyi bildiği yazılım dilini seçtirebiliriz. Örnekleri daha da çoğaltabiliriz ama artık anlaşılmıştır diye düşünüyorum.
Bunu sadece Html kullanarakta yapabiliyoruz. Ama Css kodlarıyla görünümü özelleştirerek çok daha şık bir tasarım elde edebiliriz.
Diğer tüm Html form nesnelerini öğrenmek isterseniz Html Dersleri 10 – Form Oluşturma yazımı okuyabilirsiniz.
Aslında yazacağımız kod ile şunu yapıyoruz;
Html ile oluşturduğumuz radio button’un opacity değerini 0 yapıp, bunun yerine nasıl bir tasarım yapmak istiyorsak o Css kodlarını yazıyoruz. Örneğimizi incelediğinizde daha iyi anlaşılacaktır.
Yazmış olduğumuz Css kodlarında dilediğiniz değişiklikleri yaparak kendi tasarımlarınıza uygun hale getirebilirsiniz.
Css ile Özel Radio Button Yapımı
Özel Radio Button Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h3>Cinsiyet</h3> <label class="example-radio"> Erkek <input type="radio" checked="checked" name="radio"> <span class="checkmark-radio"></span> </label> <label class="example-radio"> Kadın <input type="radio" name="radio"> <span class="checkmark-radio"></span> </label> |
Özel Radio Button Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.example-radio { display: block; position: relative; padding-left: 35px; margin-bottom: 15px; cursor: pointer; font-size: 18px; } .example-radio input { opacity: 0; } .checkmark-radio { position: absolute; top: 4; left: 0; height: 18px; width: 18px; background-color: #bbb; border-radius: 50%; } .example-radio input:checked ~ .checkmark-radio { background-color: #E7512F; } .checkmark-radio:after { content: ""; position: absolute; display: none; } .example-radio input:checked ~ .checkmark-radio:after { display: block; } .example-radio .checkmark-radio:after { top: 6px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: white; } |
Görünümü
Umarım sizin için yararlı bir yazı olmuştur.
Html ve Css ile ilgili eksikleriniz olduğunu düşünüyorsanız, Html ve Css Dersleri ile ilgili yazmış olduğum yazı serilerini inceleyebilirsiniz.
Şu yazılarda ilginizi çekebilir.
Css ile Özel Checkbox (Custom Checkbox) Yapımı
Html ve Css ile Sosyal Medya Butonları Yapımı
Jquery ile Beğendim – Beğenmedim Uygulaması
Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak
Yeni bir yazımda görüşmek üzere.
 Yapımı){kind=link}