Custom form radio buttons not working on desktop

Design help CMS
1

Hello,

I have a custom code for the style a radio button label when checked. It worked for a few weeks and now it suddenly stopped working a few days ago. I tried some other basic codes like changing the cursor but that also does not work. I changed nothing in the code and also changed nothing in the form.

<style> 

input[type="radio"]:checked + label.rsvp-yes-pla {
    		opacity: 0.6;
  	border: black 2px solid;
  transform: scale(1.1)
}  

</style>

Here is my public share link: https://printwork3d.webflow.io/sample-aanvraag

UPDATE:

I discovered the radio button style works when i click it on mobile but not on a desktop.

2

Try this. Looks like your selector is wrong.

+ select the span after radio:
image
In your code you select label after radio (But in the DOM - this is span with class of “label”)

correct code

<style>
[type="radio"]:checked + span.label-material.rsvp-yes-pla
{
  opacity: 0.6;
  border: black 2px solid;
  transform: scale(1.1)
}
</style>

image
image699×508 18.5 KB

This code also will works fine (Less specific):

[type="radio"]:checked + span
{
  opacity: 0.6;
  border: black 2px solid;
  transform: scale(1.1)
}