Hi all,
Below is an example of custom check box, using pure css here is no any script.

You can use this example many type, like to select some image or theme. I hope it will helps you somewhere.

HTML:-

<div class="wrap">
    <div class="inner"> 
    <!-- <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> -->
    </div>
    <input type="checkbox" id="11">
<label for="11">
    <i class="fa fa-check"></i>
</label>
</div>

CSS:-

.wrap{height: 100px;width: 200px;position: relative;}
.inner{height: 100px;width: 200px;background: #ccc;z-index: 1;position: relative;overflow: hidden;}
label{display: block;position: absolute;height: 100px;width: 100%;;background: #8080ff;top:-5px;left:-5px;padding: 5px;cursor: pointer;}
input[type="checkbox"] {bottom: 0px;position: absolute;right: 0;z-index: 1;}
input[type=checkbox]:checked + label {background-color: #4444d9;}
label:after{border-right: 50px solid #8080ff;border-top: 50px solid transparent;bottom: 0;content: "";height: 0;position: absolute;right: 0;width: 0;z-index: 10;}
label i.fa {bottom: 7px;color: #fff;font-size: 20px;position: absolute;right: 4px;z-index: 15;}
input[type=checkbox]:checked + label:after{border-right: 50px solid #4444d9;}
img{max-width:100%;}

Out put:-