JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="projectContainer">
    <div id="intro">Finally, custom radio buttons with no limitations!</div>
    <div class="radioGroupContainer">
        <input type="hidden" id="radioGroupCollectValue" value="">
        <div class="radioButton">
            <div class="radioButtonGraphic"></div>
            <div class="radioButtonLabel">Option 1</div>
            <input type="hidden" value="optionOneValue">
        </div>
        <hr>
        <div class="radioButton">
            <div class="radioButtonGraphic">
                <div class="radioButtonGraphicLineOne"></div>
                <div class="radioButtonGraphicLineTwo"></div>
            </div>
            <div class="radioButtonLabel">Option 2</div>
            <input type="hidden" value="optionTwoValue">
        </div>
    </div>
</div>

CSS

html, body {
    padding:0;
    margin:0;
}
#projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
hr {
    color:#fff;
    border:1px solid #777;
    margin:4px;
}
#intro {
    font-size:20px;
    padding:4px;
    font-weight:500;
}
.radioGroupContainer {
    margin-left:20px;
    margin-top:20px;
    display:table;
}
.radioGroupContainer * {
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
    cursor:default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.radioButton {
    background-color:#eee;
    padding:3px;
    border-radius:3px;
    display:table;
    position:relative;
}
.radioButtonGraphic{
    width:16px;
    height:18px;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
    background-color:transparent;
    border:2px solid #333;
    border-radius:50%;
}
.radioButtonGraphicSelected{
    position:absolute;
    background-color:lightgreen;
    z-index:100;
    width:100px;
    height:40px;
    border-radius:50%;
    opacity:.4;
    left:0;
}
/*.radioButtonGraphic, .radioButtonGraphicSelected {
    width:16px;
    height:18px;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
    position:relative;
    background-color:#fff;
}
.radioButtonGraphic *, .radioButtonGraphicSelected *{
    left:6px !important;
}
.radioButtonGraphicLineOne {
    width:2px;
    height:20px;
    background-color:#ff0000;
    display:inline-table;
    transform:rotate(45deg);
    position:absolute;
    left:6px;
}
.radioButtonGraphicLineTwo {
    width:2px;
    height:20px;
    background-color:#ff0000;
    transform:rotate(-45deg);
    display:inline-table;
    position:absolute;
    left:6px;
}
.radioButtonGraphicSelected...

JavaScript

window.onload = function () {
    //call the function to initialize the radio buttons
    initRadioButtons();
    //initalize the radio buttons
    function initRadioButtons() {
        var radioButtons = document.getElementsByClassName('radioButton');
        for (var i = 0; i != radioButtons.length; i++) {
            radioButtons[i].onclick = function () {
                var siblingRadioButtons = this.parentNode.getElementsByClassName('radioButton');
                for (var i = 0; i != siblingRadioButtons.length; i++) {
                    siblingRadioButtons[i].children[0].className = 'radioButtonGraphic';
                }
                this.parentNode.children[0].value = this.children[2].value
                this.children[0].className = 'radioButtonGraphicSelected';
            };
            radioButtons[i].ontouchend = function () {
                alert('radio button touched');
            };
        }
    }
};