checkbox and toggle switch in IE

So I'm having a hard time with checkboxes in IE11. I'm using Modernizr for fall back styling. What I'd like is for them to not be checked and then checked on click.

This here is the CSS:

I know this is a common question thats asked quit often but I've been searching around for hours trying to figure this out and I've gotten nowhere. Here is my CSS. It works fine in Chrome, safari, firefox and opera. It's Edge and IE11 that's giving my problems.

.no-cssall {
  .mo-field[type="checkbox"] {
    display: none;
  }
}

.no-cssall {
 label {
  position: relative;
  display: block;
  padding-left: 30px;
  user-select: none;
  -ms-user-select: none;
    &:before{
       content: "";
       position: absolute;
       height: 22px;
       width: 22px;
       border: 1px solid;
       left: 0px;
       top: 3px;
    }
    &:after {
       position: absolute;
       content: "" !important;
       height: 10px;
       width: 20px;
       border-left: 3px solid red;
       border-bottom: 3px solid red;
       transform: rotate(-45deg);
       left: 4px;
       top: 2px;
     }
  }
}

.no-cssall {
  input[type="checkbox"] + label {
  &:after {
    content: none !important;
  }
 }
}

.no-cssall {
  input[type="checkbox"]:checked + label {
    &:after {
      content: "" !important;
    }
  }
}

I feel like it may have something to do with the way I'm using the pseudo selectors but I'm not sure. Any help or push in the right direction would be greatly appreciated

Thank you!