Css ile Özel Checkbox (Custom Checkbox) Yapımı

Custom Checkbox yani özel onay kutularını birden fazla seçenek içerisinden kullanıcıya seçim yaptırmak istediğimiz durumlarda kullanıyoruz. Örneğin kullanıcıdan bir form doldurmasını istediğimizi düşünelim. Birçok yazılım dilini (C#, Java vb..) seçenek olarak sunup en iyi bildiği 3 yazılım dilini seçtirebiliriz. Veya birçok seçenek içerisinden en çok yapmayı sevdiği hobilerini isteyebiliriz. Ö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 checkbox’ın 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 Checkbox Html Kodları

Custom Checkbox Css Kodları

Görünümü

custom-checkbox-css

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 Radio Button (Custom Radio Button) 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

Html ve Css ile Animasyonlu Arama Kutusu Yapımı

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link