Custom checkbox (css + js)

custom-checkbox.css

[type="checkbox"].custom-checkbox {
    display: none;
}

[type="checkbox"].custom-checkbox + label.custom-checkbox-placeholder {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border: 1px solid #444444;
    background: #fff;
    padding: 0;
    position: relative;
    cursor: pointer;
}

[type="checkbox"].custom-checkbox:checked + label.custom-checkbox-placeholder:after {
    position: absolute;
    top: -10px;
    left: 0;
    content: '✔';
    font-size: 20px;
    font-weight: bold;
    color: #2ece49;
}

[type="checkbox"].custom-checkbox:disabled + label.custom-checkbox-placeholder {
    border-color: #aaa;
    cursor: not-allowed;
}

[type="checkbox"].custom-checkbox:checked:disabled + label.custom-checkbox-placeholder:after {
    color: #969696;
}

custom-checkbox.js

var applyCheckboxStyle = function(_parent) {
    var $parent = $(_parent || 'body');

    $parent.find('input[type="checkbox"]').each(function(){
        var $this = $(this);

        //Check if the current element is a custom checkbox already
        if ($this.hasClass('custom-checkbox'))
            return;

        //Apply custom element markup
        var $label = $('<label class="custom-checkbox-placeholder"></label>');

        $label.click(function(){
            $this.trigger('click');
        });
        $this.addClass('custom-checkbox');

        $this.after($label);
    });
};