Style label when input inside of it is checked

Question

I'm losing my mind how to make this work. I have HTML code below. I want to apply style on label and when input is checked I want to style label background. Is there any solution for this, because I can not make it work with input:checked+label, label+input:checked.... Nothing works.

<ul class="wcsatt-options-prompt-radios">
<li class="wcsatt-options-prompt-radio">
    <label type="radio" class="wcsatt-options-prompt-label wcsatt-options-prompt-label-one-time">
        <input class="wcsatt-options-prompt-action-input" type="radio" name="subscribe-to-action-input" value="no" />
        <span class="wcsatt-options-prompt-action"><?php echo $one_time_cta; ?></span> 
        <span class="subs-box-price">Price</span>
        <div class="sub-sub-text">Save 20$</div>        
    </label>
</li>

Thanks in advance

Answer 1

UPDATED:

I added this alternative solution using JQuery, since your label is the parent of the input and there's currently no way of selecting a child's parent using the CSS Combinators:

$('#radio-label').click(function() {
   if($('#input-radio').is(':checked')) { 
   $('#radio-label').toggleClass('has-background-color'); }
});

.has-background-color {
  background-color: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ul class="wcsatt-options-prompt-radios">
<li class="wcsatt-options-prompt-radio">
    <label id="radio-label" type="radio" for="input-radio" class="wcsatt-options-prompt-label wcsatt-options-prompt-label-one-time">
        <input id="input-radio" class="wcsatt-options-prompt-action-input" type="radio" name="subscribe-to-action-input" value="no" />
        <span class="wcsatt-options-prompt-action"><?php echo $one_time_cta; ?></span> 
        <span id="subs-box-price-text" class="subs-box-price">Price</span>
        <div class="sub-sub-text">Save 20$</div>        
    </label>
</li>

Original Post:

Instead of using "+", you should use the "~" combinator.

Use the "for" attribute (in the label element) and "id" attribute (in the input element) to connect your label to your input.

Then, use the tilde "~" in your CSS selector as below, which is known as the "Subsequent-sibling combinator" since your input element and your span element share the same parent.

Quoted from: https://www.geeksforgeeks.org/what-does-symbol-tilde-denotes-in-css/

The fact that you use "+" can't work because it is used to select the next immediate sibling element.

You can take a look about CSS Combinators for more details: https://www.w3schools.com/css/css_combinators.asp

In the code I only change the background color of the span tag for price. You can modify the code as you wish.

#input-radio:checked~#subs-box-price-text {
  background-color: cyan;
}

<ul class="wcsatt-options-prompt-radios">
<li class="wcsatt-options-prompt-radio">
    <label type="radio" for="input-radio" class="wcsatt-options-prompt-label wcsatt-options-prompt-label-one-time">
        <input id="input-radio" class="wcsatt-options-prompt-action-input" type="radio" name="subscribe-to-action-input" value="no" />
        <span class="wcsatt-options-prompt-action"><?php echo $one_time_cta; ?></span> 
        <span id="subs-box-price-text" class="subs-box-price">Price</span>
        <div class="sub-sub-text">Save 20$</div>        
    </label>
</li>