CSS Checkbox Styling Behaving Differently on Other Pages

I have a website I'm working on and I'm needing to change the styling of the check boxes when they are checked. Here is my CSS:

.settings-content input[type="checkbox"] {
    display: none;
}

.settings-content input[type="checkbox"] + label span {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../img/checkbox.png') no-repeat;
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}

.settings-content input[type="checkbox"]:checked + label span {
    background:url('../img/checkbox_checked.png') no-repeat;
    background-size: cover;
}

.settings-content input[type="checkbox"] + label span{
    width: 12px;
    height: 12px;
    margin-right: 12px;
}

HTML:

<li><input type="checkbox" name="cosmetics" /><label for="cosmetics"><span></span>Avon</label></li>

I got the checkboxes added on the homepage with the custom styling working perfectly on the homepage, but ran into a problem when trying to add checkboxes on other pages with the exact same markup and styling.

Here's my homepage with working check boxes (They are located in the "Bridal Makeup" Dropdown): http://ift.tt/1NnFk0j

Here's the settings page where the check boxes aren't working (They are just below the header of the page): http://ift.tt/1NnFm8v

You can see that on the settings page the background image has been changed properly, but when you click on the checkboxes nothing happens. They never go into a checked state. If I change the markup to make it checked by default it shows up as checked fine, but still nothing when clicking it.

I don't understand why it's not working since the styling is the same on both pages. I'm out of ideas on what the cause could be.

Any help would be appreciated.

Thanks.