在取消选中时更改复选框样式 - IE问题

Question

我在页面中有一个复选框列表，默认情况下会选中所有框。当用户点击任何特定复选框取消选中时，应更改复选框的背景颜色或使用红色十字标记检查框。

另外，我想在某些场合不是一直这样做。因此，当选中父复选框并且未选中子项时，未选中的checkebox的样式应该不同。然而，如果父母也没有被检查，那么孩子和父母应该处于正常的风格。

我尝试了以下解决方案。

红色x风格的CSS：

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);
}

它的工作正常。 “Chrome：red-x css已应用”

它在IE中不起作用。 “Internet Explorer 11：red-x css被忽略”。

我试过

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

也。它还没有用。