How to change the icon size and color of one radio field

Hi @grandvizier,

Sorry if I’m repeating my self. Could you please clarify the workflow you are looking for, ie you want the radio icons size and colour to change when you select one of the radio buttons? Currently, it’s blue on selected and the rest of the unselected buttons should be bigger and red?

Please do confirm the workflow, so that we could check if there is any CSS that could be suggested.

Looking forward to your response.

Kind Regards,
Nithin

Hi Nithin,

Thank you for the fast reply.
The radio labeled “Paper format” is the only radio field I would like to modify.

radio when unselected;

border color to be #000000
backgorund color to be #ffffff

radio when selected;

border color to be #ff0000
background color to be #d8d8d8
icon to be #ff0000

Regards,
Grandvizier

Hi @grandvizier

Sorry for the delay here.

Can you please try this CSS in Forminator > Form > Appearance > Custom CSS?

.forminator-ui #radio-3 .forminator-radio input + span[aria-hidden]{
    border-color: #000 !important;
    background: #ffffff !important;
}

.forminator-ui #radio-3 .forminator-radio input:checked + span[aria-hidden]{
    border-color: #ff0000 !important;
    background: #d8d8d8 !important;
}

.forminator-ui #radio-3 .forminator-radio input:checked + span[aria-hidden]:before{
    background: #ff0000 !important;
}

https://monosnap.com/file/5Bc30rjixQ7ucQ4XWMoeoIKDC9m7UL

Best Regards
Patrick Freitas

Hello, we haven’t heard back from you in a while so we will close down this ticket, if you have any followup questions feel free to reopen it.

Cheers,
Predrag