Source code for https://formidable-masterminds.com/style-individual-radio-buttons-on-select/

checkboxes-with-individual-classes.js

<script>
jQuery(document).ready(function($) {
    "use strict";
	$('input[name="item_meta[185][]"]').on('change', function() {
		var selected_div_class = '',
			remove_div_class = '';
		
		$('input[name="item_meta[185][]"]').each( function() {
			if ( $(this).prop("checked") ) {
				/* apply the highlight class to the selected option's parent div */
				selected_div_class = $(this).prop('class') + '-highlight';
				$(this).closest('div').addClass(selected_div_class);
			} else {
				/* remove highlights from any other options' parent div */
				remove_div_class = $(this).prop('class') + '-highlight';
				if ( $(this).closest('div').hasClass(remove_div_class) ) {
					$(this).closest('div').removeClass(remove_div_class);
				}
			}
		});
	});
});
</script>

formidable-template-individual-radio-options.css

#frm_form_17_container div.highlight {
	border: 1px solid #187374;
	background-color: rgb(255,255,235);
}

#frm_form_17_container div.highlight label {
	color: red;
	font-weight: bold;
}

#frm_form_17_container div.red-highlight {
	border: 3px double #000;
	border-radius: 7px;
	background-color: red;
	padding: 0 1rem;
}

#frm_form_17_container div.red-highlight label {
	color: white;
	font-weight: bold;
}

#frm_form_17_container div.green-highlight {
	border: 3px double #000;
	border-radius: 7px;
	background-color: green;
	padding: 0 1rem;
}

#frm_form_17_container div.green-highlight label {
	color: yellow;
	font-weight: bold;
}

#frm_form_17_container div.blue-highlight {
	border: 3px double #000;
	border-radius: 7px;
	background-color: blue;
	padding: 0 1rem;
}

#frm_form_17_container div.blue-highlight label {
	color: cyan;
	font-weight: bold;
}

#frm_form_17_container div.yellow-highlight {
	border: 3px double #000;
	border-radius: 7px;
	background-color: yellow;
	padding: 0 1rem;
}

#frm_form_17_container div.yellow-highlight label {
	color: green;
	font-weight: bold;
}

formidable-template-individual-radio-options.html

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <div  id="field_[key]_label" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </div>
    <div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">[input opt=1 class="red"][input opt=2 class="green"][input opt=3 class="blue"][input opt=4 class="yellow"]</div>
    [if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
    [if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>

formidable-template-standard-radio-buttons.html

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <div  id="field_[key]_label" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </div>
    <div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">[input]</div>
    [if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
    [if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>

radio-buttons-with-individual-classes.html

<div class="frm_opt_container" aria-labelledby="field_vqf6g_label" role="group">
	<div class="frm_radio" id="frm_radio_182-0"><label for="field_vqf6g-0">
		<input type="radio" name="item_meta[182]" id="field_vqf6g-0" value="Red" data-invmsg="Radio Button With Individual Option Classes is invalid" class="red"> Red</label>
	</div>
	<div class="frm_radio" id="frm_radio_182-1"><label for="field_vqf6g-1">
		<input type="radio" name="item_meta[182]" id="field_vqf6g-1" value="Green" data-invmsg="Radio Button With Individual Option Classes is invalid" class="green"> Green</label>
	</div>
	<div class="frm_radio" id="frm_radio_182-2"><label for="field_vqf6g-2">
		<input type="radio" name="item_meta[182]" id="field_vqf6g-2" value="Blue" data-invmsg="Radio Button With Individual Option Classes is invalid" class="blue"> Blue</label>
	</div>
	<div class="frm_radio" id="frm_radio_182-3"><label for="field_vqf6g-3">
		<input type="radio" name="item_meta[182]" id="field_vqf6g-3" value="Yellow" data-invmsg="Radio Button With Individual Option Classes is invalid" class="yellow"> Yellow</label>
	</div>
</div>

radio-buttons-with-individual-classes.js

<script>
jQuery(document).ready(function($) {
    "use strict";
	$('input[name="item_meta[182]"]').on('change', function() {
		var selected_div_class = $('input[name="item_meta[182]"]:checked').prop('class') + '-highlight',
			remove_div_class = '';
		
		/* first remove highlights from any other options' parent div */
		$('input[name="item_meta[182]"]').each( function() {
			remove_div_class = $(this).prop('class') + '-highlight';
			if ( $(this).closest('div').hasClass(remove_div_class) ) {
				$(this).closest('div').removeClass(remove_div_class);
			}
		});
		
		/* apply the highlight class to the selected option's parent div */
		$('input[name="item_meta[182]"]:checked').closest('div').addClass(selected_div_class);
	});
});
</script>

standard-checkbox.js

<script>
jQuery(document).ready(function($) {
    "use strict";
	$('input[name="item_meta[184][]"]').on('change', function() {
		
		/* first remove highlights from any other options' parent div */
		$('input[name="item_meta[184][]"]').each( function() {
			if ( $(this).prop("checked") ) {
				/* apply the highlight class to the selected option's parent div */
				$(this).closest('div').addClass('highlight');
			} else {
				if ( $(this).closest('div').hasClass('highlight') ) {
					$(this).closest('div').removeClass('highlight');
				}
			}
		});
	});
});
</script>

standard-radio-button.css

#frm_form_17_container div.highlight {
	border: 3px double #187374;
	border-radius: 7px;
	background-color: rgb(255,255,235);
	padding: 0 1rem;
}

#frm_form_17_container div.highlight label {
	color: red;
}

standard-radio-button.html

<div class="frm_opt_container" aria-labelledby="field_m5hns_label" role="group">
	<div class="frm_radio" id="frm_radio_183-0"><label for="field_m5hns-0">
		<input type="radio" name="item_meta[183]" id="field_m5hns-0" value="Red" data-invmsg="Standard Radio Buttons is invalid"> Red</label>
	</div>
	<div class="frm_radio" id="frm_radio_183-1"><label for="field_m5hns-1">
		<input type="radio" name="item_meta[183]" id="field_m5hns-1" value="Green" data-invmsg="Standard Radio Buttons is invalid"> Green</label>
	</div>
	<div class="frm_radio" id="frm_radio_183-2"><label for="field_m5hns-2">
		<input type="radio" name="item_meta[183]" id="field_m5hns-2" value="Blue" data-invmsg="Standard Radio Buttons is invalid"> Blue</label>
	</div>
	<div class="frm_radio" id="frm_radio_183-3"><label for="field_m5hns-3">
		<input type="radio" name="item_meta[183]" id="field_m5hns-3" value="Yellow" data-invmsg="Standard Radio Buttons is invalid"> Yellow</label>
	</div>
</div>

standard-radio-button.js

<script>
jQuery(document).ready(function($) {
    "use strict";
	$('input[name="item_meta[183]"]').on('change', function() {
		
		/* first remove highlights from any other options' parent div */
		$('input[name="item_meta[183]"]').each( function() {
			if ( $(this).closest('div').hasClass('highlight') ) {
				$(this).closest('div').removeClass('highlight');
			}
		});
		
		/* apply the highlight class to the selected option's parent div */
		$('input[name="item_meta[183]"]:checked').closest('div').addClass('highlight');
	});
});
</script>