Html/css - Unable to align custom checkboxes one under the other

I'm constructing custom checkboxes instead of the default ones. I need to align them one under another, the problem is if I set:

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

In order to hide the default checkbox, the rest of the checkboxes don't align in one column. If I set display:block;, they do align as I need them, but I see the custom checkbox and the default. How do I workaround this behavior?

HTML:

<div id="checkBoxesContainer">
        <input type='checkbox' value='valuable1' /><label for="thing"></label> Content 5
        <input type='checkbox' value='valuable2' /><label for="thing"></label> Content 4
        <input type='checkbox' value='valuable3' /><label for="thing"></label> Content 3
        <input type='checkbox' value='valuable4' /><label for="thing"></label> Content 2
        <input type='checkbox' value='valuable5' /><label for="thing"></label> Content 1
    </div> 

CSS:

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

input[type=checkbox] + label
{
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
    background-color: blue;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}

JSfiddle

Second question, what is the usage of for in the label and name in the input?