jQuery validation with custom CSS checkbox

I'm using JQuery validation plugin and have styled my checkbox with custom css styles.

For my custom checkbox I'm using pure CSS as shown below. The issue I'm having is that when it validates it doesn't display the error message.

I'm assuming because I have to use display:none for the custom styled checkbox it can't find the input to add the error message label to it.

My other form fields work fine with the validation messages with similar HTML but not using custom image replacement css like for the checkbox.

Any idea on how I can get both to work (custom checkbox style AND validation)? Thanks

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

input[type=checkbox] + label.checkboxLbl
{
background-image: url(../img/checkbox.png);
height: 18px;
width: 18px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label.checkboxLbl
{
background-position: 0 -18px;
height: 18px;
width: 18px;
display:inline-block;
padding: 0 0 0 0px;
}

<div class="checkbox mycheckbox">
        <span class="tncLabel"><strong>I have read and accept the <a class=
        "underLined" href="tnc" target="_blank">Terms and
        Conditions</a>*</strong></span> 
        <input class=
        "form-control css-checkbox" id="checkboxG1" name="checkboxG1" required=
        "required" title="Please accept our terms and conditions" type=
        "checkbox" value="1">
        <label class="css-checkbox-label checkboxLbl"
        for="checkboxG1"></label>
        <br style="clearfix">
</div>

I've also tried adding the following but still no luck.

$("#registryForm").validate({
   ignore: []  // enables validation of hidden elements
});