Fancy Checkboxes

by Wray Bowling

HTML

<label for="checkers-1" class="fancy"></label>
    <input id="checkers-1" name="checkers-1" type="checkbox" checked>

    <label for="checkers-2" class="fancy"></label>
    <input id="checkers-2" name="checkers-2" type="checkbox">

CSS

*{
        margin:0;
        padding:0;
        border:0;
        outline:0;
    }

    body{
        padding:80px;
        font-family:Helvetica Neue;
    }

    label.fancy{
        display:block;
        float:left;
        margin:8px;    
        width:80px;
        height:80px;
        border-radius:50%;
        line-height:80px;
        text-align:center;
        color:white;
        background-color:rgb(255,0,122);
        font-size:3em;
    }

    label.fancy:hover{
        background-color:rgb(236,54,141);
        cursor:pointer;            
    }

    label.fancy.checked{
        background-color:rgb(102,182,0);
    }

    label.fancy.checked:after{
        content:'✓';
    }

    label.fancy.checked:hover{
        background-color:rgb(120,236,54);
    }

    label.fancy + input{
        display:none;
    }

JavaScript

$('label.fancy + input').each(function(){
        if( $(this).is(':checked') ){
            $(this).prev().addClass('checked');
        }
    });

    $('label.fancy').click(function(){
        if( $(this).hasClass('checked') ){
            $(this).removeClass('checked');
        }else{
            $(this).addClass('checked');
        }
    });