Css ile Özel Radio Button (Custom Radio Button) Yapımı

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.

Custom Radio Button Html Kodları

Custom Radio Button Css Kodları

Görünümü

custom-radio-button-css-html

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ı 

Css ile Toggle Switch 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.

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +