changing checkbox style on uncheck - IE issue

I have a list of checkboxes in a page with all the boxes are checked by default. When user clicks on any particular checkbox to uncheck it, the background color of the checkbox should be changed or the boxes should be checked with cross mark in a red color.

I tried the following on uncheck,

Also, I would like to do this on some occasion not all the time. So, when the parent checkbox is checked and the child is unchecked, the style of the unchecked checkebox should be different. Whereas, if the parent is also not checked, then the child and the parent should be in normal style.

I tried the below solution.

CSS for red-x style:

input[type=checkbox] {
    position: relative;
}
input[type=checkbox].awesome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: -1px;
    padding: 0;
    border: 1px solid;
    border-color: #808080 #808080;
    background-position: 0 -17px; 
    background-image: url(images/checkbox-x-red.png);
}

It is working fine in chrome. "Chrome : red-x css is applied"

It is not working in IE. "Internet Explorer 11: red-x css ignored".

I tried

background-image:url(images/checkbox-x-red.png) !important; 

also. Still it is not working.