.checkbox {
  background-color: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: content-box;
  height: 24px;
  margin-right: 10px;
  position: relative;
  width: 24px;

  input {
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: inherit;
    opacity: 0;
    outline: none;
    width: inherit;
  }

  svg {
    display: none;
    fill: #000000;
    height: 24px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 24px;
  }

  input:checked + svg {
    display: block;
  }
}

.checkbox {
  background-color: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: content-box;
  height: 24px;
  margin-right: 10px;
  position: relative;
  width: 24px;

  // NB: Fix width for IE11
  @media screen and (-ms-high-contrast: active),
  screen and (-ms-high-contrast: none) {
    width: 32px;
  }

  input {
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: inherit;
    opacity: 0;
    outline: none;
    width: inherit;
  }

  svg {
    display: none;
    fill: #000000;
    height: 24px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 24px;
  }

  input:checked + svg {
    display: block;
  }
}

Fix checkbox width on IE11
Fix checkbox width on IE11
