Creating custom radio buttons in Gravity Forms is fairly easy. The requirements consist of the creation of a checked and unchecked button, along with a little CSS. Let’s get started.

The first order of business is to create one radio button for when it is not selected and one radio button for when it is selected. For mine, I created vector versions in Adobe Illustrator, sized them down to 16 x 16 px in Photoshop and exported to a PNG file. Here are the two buttons:

Once you create the buttons and upload them, you’ll need to add the following CSS:

.gform_wrapper .gfield_radio li label {
margin: 0 !important;
padding: 0 30px !important;
}

input[type=radio] {
display: none;
}

.gfield_radio li input[type=radio] + label {
background: url(/wp-content/uploads/2017/09/rb-e.png) left center no-repeat;
}

.gfield_radio li input[type=radio]:checked + label {
background: url(/wp-content/uploads/2017/09/rb-f.png) left center no-repeat;
}

Example

Obviously, make sure to replace the URL of the image paths in the above code to yours and there you have it.