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 Tüm Detaylarıyla Html 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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<h3>Hobileriniz Nelerdir?</h3> <label class="example-checkbox"> Müzik Dinlemek <input type="checkbox" checked="checked"> <span class="checkmark-checkbox"></span> </label> <label class="example-checkbox"> Kitap Okumak <input type="checkbox" checked="checked"> <span class="checkmark-checkbox"></span> </label> <label class="example-checkbox"> Spor Yapmak <input type="checkbox" checked="checked"> <span class="checkmark-checkbox"></span> </label> |
Custom Checkbox 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 48 49 |
.example-checkbox { display: block; position: relative; padding-left: 35px; margin-bottom: 15px; cursor: pointer; font-size: 18px; } .example-checkbox input { opacity: 0; } .checkmark-checkbox { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #bbb; } .example-checkbox input:checked ~ .checkmark-checkbox { background-color: #E7512F; } .checkmark-checkbox:after { content: ""; position: absolute; display: none; } .example-checkbox input:checked ~ .checkmark-checkbox:after { display: block; } .example-checkbox .checkmark-checkbox:after { left: 8px; top: 4px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } |
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 Radio Button (Custom Radio Button) 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
Html ve Css ile Animasyonlu Arama Kutusu Yapımı
Yeni bir yazımda görüşmek üzere.
 Yapımı){kind=link}