JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form action="#" method="post">
    <fieldset>
        <legend>Sex</legend>
        <label for="m">Male</label><input name="sex" type="radio" id="m" />
        <label for="f">Female</label><input name="sex" type="radio" id="f" />
    </fieldset>
</form>

CSS

span {
    display: inline-block;
}
.legend {
    margin-right: 1em;
}
.legend::after {
    content: ': ';
}
.buttonRadio {
    background-color: #fff;
    padding: 0.5em 1em;
    border: 1px solid #000;
    margin: 0.5em 0 0 0;
}
    
.buttonRadio.checked {
    background-color: #ffa;
}

JavaScript

$('fieldset').each(
    function() {
        var that = $(this),
            legend = that.find('legend').text();
        $('<span />').text(legend).addClass('legend').appendTo(that);
        if (that.find('input').length == that.find('input[type="radio"]').length) {
            var len = that.find('input[type="radio"]').length;
            for (var i = 0; i < len; i++) {
                $('<span />')
                    .text($('label')
                          .eq(i).text())
                    .addClass('buttonRadio')
                    .attr('data-fromID',that.find('input:eq(' + i + ')').attr('id'))
                    .appendTo(that);
            }
        }
    }).on('click','.buttonRadio',function(){
        var id = $(this).attr('data-fromID');
        $(this).addClass('checked').siblings().removeClass('checked');
        $('#' + id).click().trigger('change');
    }).find('label, input[type="radio"], legend').css('display','none');