Hello @hosshoss
Unfortunately in the HTML standard there are some controls whose styles cannot be edited in the same way than others, it is the case of the radio button, checkboxes and input files. The alternative would be hide the radio button at all using CSS, and display in their place some images with the different control’s states (ticked and unticked).
For example, you can enter the following style definition into the “Customize From Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):
#fbuilder .cff-radiobutton-field input{display:none !important;}
#fbuilder .cff-radiobutton-field .dfield label span{
display:inline-block;
background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Ic_radio_button_off_48px.svg/480px-Ic_radio_button_off_48px.svg.png") no-repeat 0 0;
background-size:20px 20px;
padding-left:20px;
line-height:20px;
}
#fbuilder .cff-radiobutton-field .dfield input:checked + span{
background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Ic_radio_button_on_48px.svg/1024px-Ic_radio_button_on_48px.svg.png");
}
and that’s all.
Best regards.
