چک باکس زیبا برای طراحی سایت

حتما گاهی شده که چک باکس های سیستم عاملتون به طرح سایتتون نمی خوره . و البته در هر سیستم عاملی یک جور نشون داده میشه . اگر می خواید خودتون چک باکس رو طراحی کنید می تونید از راهنمای زیر استفاده کنید :

به طور مثال شما چک باکس های زیر رو در فایل Html  دارید :

<ul class="customChList lstn">
    <li><input type="checkbox" value="1" id="check1"/><label for="check1">یک </label></li>
    <li><input type="checkbox" value="2" id="check2"/><label for="check2">دو</label></li>
    <li><input type="checkbox" value="3" id="check3"/><label for="check3">سه </label></li>
    <li><input type="checkbox" value="4" id="check4"/><label for="check4">چهار </label></li>
    <li><input type="checkbox" value="5" id="check5"/><label for="check5">پنج</label></li>
</ul>

حالا کد زیر رو به فایل css خودتون اضافه کنید :

.customChList li input[type='checkbox']{
    display:none;
}
.customChList li label{
    font-size: 18px;
    padding-left:35px;
    background: url(images/custom-checkbox.png) no-repeat;
}

.customChList li label:hover{
    background-position: 0px -32px;
}

.customChList li label.checked{
    background-position: 0px -64px;
}

این کد باعث میشه چک باکستون مثل عکس بشه . اگرذ دوست داشتید به راحتی می تونید رنگ های مورد نظر خودتون رو جایگزینش کنید .

حالا فقط کافیه کد زیر رو در قسمت javascript خودتون قرار بدید :

$(document).ready(function(){
    $(".customChList input[type='checkbox']").change(function(){
        if($(this).is(":checked")){
            $(this).next("label").removeClass('hover').addClass('checked');
        }
        else{
            $(this).next("label").removeClass('checked');
        }
    });
});

البته اگر از css3 استفاده می کنید می توانید به جای کد جاوااسکریپت بالا از کد زیر استفاده کنید .

.customChList li input[type='checkbox']:checked ~ label{
    background-position: 0px -64px;
}

خب می دونید که هنوز که هنوز بعضی مرورگرهای قدیمی ( اینترنت اکسپلورر ! )  از css3 پشتیبانی نمی کنن پس بهتره از همون کد جاوا اسکریپت استفاده کنید .

منبع