Checkbox checked style not working

I used the code from http://ift.tt/1jbZ2Js. I used the checkbox kit, using the Green Check in the Light Checkbox. However, the output was weird. It kept repeating the check image across.

Here's the code at codepen: http://ift.tt/1JTmUSx

HTML

<form>
<div class="formfieldcheck">
                        <!--<label><input type="checkbox" checked>Subscribe to Mailing List</label>-->
                        <input type="checkbox" class="css-checkbox" id="checkbox1"  checked="checked"/>
                        <label for="checkbox1" name="checkbox1_lbl" class="css-label lite-green-check">Subscribe to Mailing List</label>
                    </div>
</form>

CSS

.formfieldcheck label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.formfieldcheck input[type=checkbox].css-checkbox {
      position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; 
    width:1px; 
    margin:-1px; 
    padding:0;
    border:0;
}

.formfieldcheck input[type=checkbox].css-checkbox + .formfieldcheck label.css-label {
    padding-left:20px;
    /*height:15px; */
    display:inline-block;
    line-height:15px;
    background-repeat:no-repeat;
    /*background-position: 0 0;*/
    font-size:15px;
    vertical-align:middle;
    cursor:pointer;
}

.formfieldcheck input[type=checkbox].css-checkbox:checked + .formfieldcheck label.css-label {
    background-position: 0 0;
}

.formfieldcheck .css-label{
    background-image: url(images/checkicon.png);
}

How do I fix it? I want to keep it pure css without javascript.