Checkbox image styling not working correctly within form on IE

I've got a form in which I've got checkboxes styled with images. All working nicely in Chrome, FF, Edge... but not IE.

Basically, the CSS styling works how I want it to in IE, when the checkboxes are NOT within a form, but as soon as the form tags go around them, they stop working properly. Instead, rather than clicking the image to get the checked effect, I have to click beside the image.

Anyone help me out with what I have to do to make it work correctly in IE? I've tried it in IE 11. Why would making it within a form cause it to change behaviour?

I'm not a natural coder, and most of the CSS below was adapted from another question I found on here.

Jsfiddle - http://ift.tt/2rAoZgh

HTML

<form> 
   <input id="cb1" name="product1[]" type="checkbox" value=" Classic switch" />
   <label for="cb1">
       <img src="http://ift.tt/2r19XDr" alt="" />
   </label>

   <input id="cb2" name="product2[]" type="checkbox" value=" Right angle switch" />
    <label for="cb2">
        <img src="http://ift.tt/2r19XDr" alt="" />
    </label>

    <input id="cb3" name="product3[]" type="checkbox" value=" Adaptor" />
    <label for="cb3">
        <img src="http://ift.tt/2r19XDr" alt="" />
    </label>

    <input id="cb4" name="product4[]" type="checkbox" value=" Blow switch" />
    <label for="cb4">
        <img src="http://ift.tt/2r19XDr" alt="" />
    </label>

    <input id="cb5" name="product5[]" type="checkbox" value=" Cable" />
    <label for="cb5">
        <img src="http://ift.tt/2r19XDr" alt="" />
    </label>

CSS

input[type="checkbox"][id^="cb"] {
    display: none;
}

label {


border: none;
  padding: none;
  display: block;
  position: relative;
  margin: none;
  cursor: pointer;
}

label img {
  height: 125px;
  width: 125px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}


:checked + label img {
  transform: scale(1);
  box-shadow: 0 0 20px #ff0;
  z-index: -1;
}