Cross browser checkbox styling with label and no need for an "id" value on the input and "for" attribute on the label. There's also an example of using an encoded svg for the background image.

Checkbox-Style.scss

// markup: <label class="css-label"><input type="checkbox" id="valueCheck" /><i class="css-checkbox"></i>Some Label</label>
.css-label{
  padding-left:20px;
  position:relative;
  input[type=checkbox]{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:15px;
    width:15px;
    padding:0;
    border:0;
    left:0;
  }
  .css-checkbox{
    display:inline;
    position:absolute;
    left:0;
    width:15px;
    height:15px;
    background-image: none;
    background-color: #fff;
    color:#000;
    border: 1px solid #333;
    border-radius: 3px;
    cursor:pointer;
  }
  input[type=checkbox]:checked + .css-checkbox{
    background-position: 0 0;
    background-image: url("data:image/svg+xml; base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNScgaGVpZ2h0
PScxNSc+PHBhdGggZmlsbD0nIzMzMzMzMycgZD0nTTEyLjQzOSwzLjg0NmwtNi4zMDgsNi44MTds
LTAuNjE4LDAuNjY4bC0wLjU5My0wLjY5bC0zLjM2LTMuOTA4bDEuMDk2LTEuMTgxbDIuNzIxLDIu
MDA1bDUuOTUyLTQuODg4IEwxMi40MzksMy44NDZ6Jy8+PC9zdmc+");  //To change the checkbox color base 64 decode the above encoded string and change the fill color then renecode and replace
  }
}

Think I'm going to remove the embed svg and use a font icon and a ligature for the checkmark. I can then apply a timing transition to the checkmark that adjust it's opacity on check.

Screw that font icons are out will use an inline svg icon