Set class style if input is checked?

Question

css

There is such a structure

<label class="catalog-filter-block-item-label">
<span class="custom-input-checkbox"></span>

<span class="wpcf7-form-control-wrap acceptance-987">
<input type="checkbox" name="acceptance-987" value="1" class="wpcf7-form-control wpcf7-acceptance" aria-invalid="false"></span> <span class="custom-input-checkbox-name">Ставя галочку я соглашаюсь с условиями данного соглашения и прочее</span>
</label>

I need to make it so that if input :checked then pass the change to custom-input-checkbox
The problem is that the input is wrapped in another span, through the plugin, and you can’t change it, so such a problem.
This doesn't work

.catalog-filter-block-item-label input:checked~.catalog-filter-block-item-label .custom-input-checkbox:after {
    background-image: url(../images/catalog/checked-filter.png);
}

Can this be done via css?

Answer 1

The '~' combinator selects elements that are after the specified element if they have a common parent.
Actually, change the html structure.

Answer 2

You can't walk up and down the tree using css. But it’s also better not to pick the wrappers for contact-form-7.
So attaching this :after to .wpcf7-form-control-wrap instead of .custom-input-checkbox-name won't work?