How to style the label of a checked radio button

Where can we see the website in question?

My main site is still changing, but here is my sandbox form:

https://splinedesign.co.uk/wp/assessment/

As you can see on “Step 2” the radio buttons show a different color on mouseover but I need them to also show a different style when checked.

• This reply was modified 3 years, 1 month ago by timhuk.

I’ve tried the following CSS:

.assess4 input[type=”radio”]:checked + label {
background-color:#bfb;
}

But this isn’t working.

Because nothing on the page matches the selector.

Thanks for your prompt replies Takayuki-san,

How would you suggest I change my CSS (or the form) to style the labels or checked radios?

I have created a 2nd sample page. Here I am showing some radio buttons created manually with HTML code and also some radio buttons created with CF7. All of the buttons are styled with the same CSS.

You will see that the top set of button labels change their style when selected.

How can I do the same with the CF7 radios and labels?

https://splinedesign.co.uk/wp/test/

I figured out how to solve this issue by using the feature Selectable recipient with pipes to generate my labels.

Originally I was using a standard <label></label> tag to create the labels for my radio buttons. However this separates the label from the radio so that CSS can’t see a link between a input[type="radio"]:checked and its label.

By using the Selectable recipient with pipes technique I can now style a selected label as follows.

CF7 Form:
[radio question-01 "Label for option 1|1"]
[radio question-01 "Label for option 2|2"]

CSS:
input[type=radio]:checked + .wpcf7-list-item-label {
    background-color: #bfb;
    border-color: #4c4;
}

Example here