Can't get :checked to work

I've got some checkboxes. My goal is to have 1 picture displayed before the user checks the checkboxes and then another picture display after they check the checkboxes.

Here is the styling so far:

fieldset[data-id="2"] input[type="checkbox"]{
    display: none
}


fieldset[data-id="2"] label{
    display: block;
    color: transparent;
    width: 60px;
    height: 40px;
    background: #f00;
}

fieldset[data-id="2"] .sf-checkbox-wrapper>label:first-child{
    background-image:url(myurl.png);
}

fieldset[data-id="2"] .sf-checkbox-wrapper>label:first-child+label{
    background: #00f;
}

fieldset[data-id="2"] .sf-checkbox-wrapper>label:first-child+label+label{
    background: #90f;
}

fieldset[data-id="2"] .sf-checkbox-wrapper>label:first-child+label+label+label{
    background: #99f;
}

The colors work, the first checkbox has a picture, the second a blue box and the third a purple box, and so on.

However, I can't seem to get the :checked parameter to work here, in order to tell the code that my user has checked.

The only reaction I've had is when I do:

fieldset[data-id="2"] input[type="checkbox"]{
    display: none
}

fieldset[data-id="2"] input[type="checkbox"]:checked{
    background: #00f;
}

And the result isn't what I expected, it's just a big check mark in the middle, not a background box. In any way, I don't want it to be global, I want a separate image for each checkbox. Like for example, vampire teeth on a "Horror" checkbox and a gun on an "Action" checkbox.

Thanks in advance.