CSS ile Özelleştirilmiş Checkbox ve Radiobutton yapımı

  • 06.10.2015
  • tayyipyetis
  • CSS

css logoMerhaba arkadaşlar, bu makalede kendi işlerim için kullandığım ufak bir kontrolden bahsedeceğim. projeler üzerinde çalışırken zaman zaman tasarım konusunda iyi şeyler çıkarmak isteyebilirsiniz hatta durum öyle bir seviyeye gelirki klasik html kontrollerinden bile sıkılıp kendi kontrollerinizi yapmak isteyebilirsiniz hazır temaların çoğunda bu tür elementler zaten değiştirilmiş olarak gelir ama kendi temasını yapanlar için bu işlemlerin de yapılması lazım. Html butonlar ve textboxlar yüksek oranda kişiselleştirilebilir özelliktedir örneğin bir butonun normal, hover ve active durumlarındaki görünümlerini basit css komutları ile değiştirebilirsinz hakeza textboxlar için de durum aynıdır fakat konu checkbox, radio buton ve select menülere gelince durum biraz değişiyor ve daha karmaşık kodlar yazmanız gerekebiliyor ben internetten bulduğum ve kendi projeme göre üzerinde değişiklikler yaptığım bir checkbox örneğini aşağıda paylaşıyorum. örneği “checkbox” yazan yerleri “radio” olarak değiştirerek radio butonlara da uygulayabilirsiniz.

CSS kodları :

<style>
.ozelcheckbox{
    width: auto;    
    float:left;
    margin-right:10px;
}
.ozelcheckbox input[type=checkbox] + label {
    cursor: pointer;
    width: 19px;
    height: 18px;
    top: 0;
    background:#f7f7f7;
    border:1px solid #C7C7C7;
    display:inline-block;
    float:left;
    margin-right:5px;
}
.ozelcheckbox input[type=checkbox] + label::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 11px;
    height: 5px;
    background: transparent;
    margin-top: 4px;
    margin-left: 3px;
    border: 3px solid #0b9dda;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.ozelcheckbox:hover input[type=checkbox]:not(:checked) + label::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
    filter: alpha(opacity=30) !important;
    opacity: 0.3 !important;
}
.ozelcheckbox input[type=checkbox]:checked + label {
    background-color:#FC8A58;
    border-color:#FC8A58;
}
.ozelcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
border-color:#fff;
}
</style>

HTML Kullanımı :

<div class="ozelcheckbox">
    <input type="checkbox" value="129" id="chkbuton" name="check" style="display:none"/>
    <label for="chkbuton"></label>
    <label for="chkbuton" style="color:#000;float: right;"> Özel CheckBox </label>
</div>

 

Sonuç :

Select menüler için ise bir sonraki makalede Github üzerinde silviomoreto kullanıcısı tarafından geliştirilen boostrap-select projesini göstereceğim. Umarım faydalı olmuştur.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap

Diğer Makaleler

Etiketler