To customize radio buttons, just hide the native html radio input via display:none
and create a label for every radio input you have (the for-attribute should match the radio inputs id attribute). Then Style the label with css (here you can present them as grouped buttons). Every label should be wrapped in a parent container, which contains the label and the radio button, so you can style the active state of the radio button with the “plus” selector:
label + input[type='radio']:active {
/*the styles for the active radio button*/
}
This trick lets you use the default radio logic, because the labels interact as layer for the hidden radio input fields.