In my custom template, I have overwritten the styles of radio buttons and labels with the following CSS:
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
left: -9999px;
visibility: hidden;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
/* Styles here */
}
...
Now, I am trying to apply a completely different style to radio buttons and labels within a specific div using the code below:
.cc-selector-2 input[type="radio"] {
position: absolute;
z-index: 999;
display: none !important; /* hide the radio button */
}
...
I have attempted various methods to override the styles but haven't been successful so far. I even tried referencing the id (#age1) of the radio button, but it doesn't seem to work as expected.
If you have any suggestions or solutions, please let me know. Thank you!