Custom checkbox CSS

custom-checkbox-ie-lte8-fallback.js

//supportsSelector
;(function( global ) {

    var doc = global.document,
        hasQuerySelect = !!doc.querySelector;

    function supportsSelector( selector ) {

        var body = doc.body,
            ret, div, style;

        // If the browser has support, take the faster path
        if ( hasQuerySelect ) {

            try {
                // Invalid selectors will throw exceptions
                doc.querySelector( selector );
                ret = true;
            } catch( e ) {
                ret = false;
            }

            // Return early from fast path
            return ret;
        }

        // Back up plan for older browser that do not support qS
        body.appendChild(
            (
                ( div = document.createElement( "div" ) ),
                    ( div.innerHTML = [ "&shy;<style>", selector, "{}</style>" ].join("") ),
                    div
                )
        );

        style = div.children[ 0 ];

        // IE8 has an easy out, the rule list will be empty
        if ( style.styleSheet && !style.styleSheet.rules.length ) {
            ret = false;
        } else {
            // IE6,7 will create pseudo selectors named ":unknown"
            // Some cases will be uppercase, others will not
            // IE6,7,8 will all create correct rules for selectors deemed valid

            ret = !/unknown/i.test( style.styleSheet.rules[0].selectorText );
        }

        body.removeChild( div );

        return ret;
    }

    global.supportsSelector = supportsSelector;

})( this );

//Checkbox lte ie8 fallback
;(function(){

    if (supportsSelector(':checked')){
        return;
    }

    updateCheckboxLabel()

    function updateCheckboxLabel($checkboxes, noUpdateRadiosGroup){
        if (!$checkboxes){
            $checkboxes = $('body').find('input[type="checkbox"], input[type="radio"]')
        }

        if (!$checkboxes || !$checkboxes.length){
            return;
        }

        $checkboxes.each(function(){
            if ($(this).is(':checked')){
                $(this).addClass('checked').parent('label').addClass('checked')
            }
            else{
                $(this).removeClass('checked').parent('label').removeClass('checked')
            }
        })

        if (!noUpdateRadiosGroup && $checkboxes.attr('type') == 'radio'){
            updateCheckboxLabel( $('body').find('input[name="' + $checkboxes.attr('name') + '"]'), true )
        }
    }

    $('body').on('change', 'input[type="checkbox"], input[type="radio"]', function(){
        updateCheckboxLabel($(this))
    })
})();

custom-checkbox.html

<label class="custom-checkbox" onclick="" tabindex="0"><input type="checkbox" checked="checked" /><i></i>Customed checkbox</label>
<!--
onclick="" - ios clickable
tabindex="0" - tab selectable
-->

custom-checkbox.less

label.custom-checkbox{
    display: inline-block;
    margin-bottom: 0.5em;
    white-space: nowrap;
    cursor: pointer;

    input{
        position: absolute;
        z-index: -1;
        clip: rect(0, 0, 0, 0);
        outline: none;
    }

    i{
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        margin-right: 0.3em;
        margin-top: -2px;
        background: #fff no-repeat center;
        border: solid 1px #e3e3e3;
        border-radius: 3px;
    }

    input:focus + i{
        border-color: rgb(255, 185, 0);
    }
}

label.custom-checkbox input:checked + i, //Modern
label.custom-checkbox input.checked + i, //Just in case
label.checked i{ //IE lte8
    background: url(checkbox-checked-icon.png) no-repeat center; //IE lte8
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAIAgMAAAC9lIYlAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMzAIL4qAgAAAAoSURBVAjXYwgNTWAIDW1gCA0TYAiNCGCYmhjAoNoawOAlGsAQFRoAAIFOB9u2s7srAAAAAElFTkSuQmCC) no-repeat center ~'/' auto;
}