How to replace checkbox with an image using a label with no id

Question

I don't believe this question is a duplicate, I have read Pure CSS Checkbox Image replacement and I am taking code from http://www.hongkiat.com/blog/css3-checkbox-radio/

My issue is that I do not want to use IDs for my checkboxes as this is a template and many may be included on the same page. I've almost gotten everything working but I cannot select the label:before when the checkbox is checked to change it to a different background color.

HTML

<label><input type="checkbox" /></label>

CSS ( the last selector is the one I'm trying to get to work )

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

label {
    display: inline-block;
    cursor:pointer;
    position:relative;
    font-size:13px;
    top:0;
    right:-30px;
    width:16px;
}

label:before {
    content: "";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    background-color:#aaa;
}

input[type="checkbox"]:checked + label:before {
    content:"";
    background:#219161;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    height:16px;
    width:16px;
    display:inline-block;
    padding:0 0 0 0;
}

Answer 1

You can add an extra span inside the label but after the input and use the pseudo-element on that

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  top: 0;
  right: -30px;
  width: 16px;
}
label span:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #aaa;
}
input[type="checkbox"]:checked + span:before {
  content: "";
  background: #219161;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 16px;
  width: 16px;
  display: inline-block;
  padding: 0 0 0 0;
}

<label>
  <input type="checkbox" /><span></span>
</label>

Answer 2

JS solution for reference, CSS answer came in after I posted and leaving this for future reference

HTML ( loaded into a div which has a templateID of thisTemplateID )

<label><input type="checkbox" class="checkboxtype1" /></label>

JS

$('#' + thisTemplateID + " .checkboxtype1").bind('change', function() {
            if ( $( this ).prop("checked") ) {
                $(this).parent('label').addClass('ticked');
            } else {
                $(this).parent('label').removeClass('ticked');
            }
});

CSS

label {
    display: inline-block;
    cursor:pointer;
    position:relative;
    font-size:13px;
    top:0;
    right:-30px;
    width:16px;
    }

label:before {
    content: "";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    background-color:#aaa;
    }

label.ticked:before {
    content:"";
    background:#219161;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    height:16px;
    width:16px;
    display:inline-block;
    padding:0 0 0 0;
}