Css - Custom style on checkbox not working

First off, I have a kendo grid. Now I dynamically add a checkbox to the DataSource, as shown below:

var chkBox =  "<input type='checkbox' id='chUpload'/><label for='chUpload'><a href='#' id='cbChoose'></a>test</label>";

var uploadedFiles = 
[
    { 
        facility: "Sunrise medical Laboratories", 
        documentName:  "Lab Results",
        documentType: "PDF",
        selected: chkBox
    }
];

The following are the styles implemented in this check box:

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

input[type="checkbox"] + label a
{
    display:inline-block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/checkBox.png') right top no-repeat;
    cursor:pointer;
    float:right;
    margin-top:10px;
    margin-right:10px;
}

input[type="checkbox"]:checked + label a 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

I found that these styles work with other flags, which I added to the tabs of the panel panel, but nothing is displayed in the grid.

I created jsfiddle when the black boxes are stylized. I hid it display:none;in css to see where all the text fields are. If it is used, the control check fields are not displayed in the grid.

Any ideas why?