Custom radio buttons with excellent browser support

These radio buttons have excellent browser support. I think they are supported in almost any browser ever made including IE, but it has not been tested. Offers more custom styles than any other design!

by eawe_

HTML

<div class="radioGroupContainer" id="radioChoicesOne">
    <div class="radioButtonContainer">
        <div class="radioButtonDot" name="optionOne"></div>
        <input type="button" class="radioButtonLabel" value="Option One">
    </div>
    <div class="radioButtonContainer">
        <div class="radioButtonDot" name="optionTwo"></div>
        <input type="button" class="radioButtonLabel" value="Option Two">
    </div>
    <div class="radioButtonContainer">
        <div class="radioButtonDot" name="optionThree"></div>
        <input type="button" class="radioButtonLabel" value="Option Three">
    </div>
</div>
        
        <div id="radioButtonGroupOneValue"></div>
        <input type="button" value="Get radio button value..." onclick="document.getElementById('radioButtonGroupOneValue').innerHTML = document.getElementById('radioChoicesOne').getAttribute('name');">

CSS

/*
* Created by William Green.
* Questions or comments? Email [email protected]
* I would appreciate credit for this code if you use it; but it is not required.
* Last updated July 26, 2015
* Created July 26, 2015
*
*/




.radioButtonContainer {
    background-color:#eee;
    padding:5px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:table;
    margin-top:5px;
    margin-bottom:5px;
}

.radioButtonContainer .radioButtonDot {
    width:16px;
    height:16px;
    background-color:transparent;
    border:1px solid #000;
    display:inline-block;
    vertical-align:middle;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}

.radioButtonContainer .radioButtonDotActive {
    width:16px;
    height:16px;
    background-color:#1396DE;
    border:1px solid transparent;
    display:inline-block;
    vertical-align:middle;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}

.radioButtonContainer .radioButtonLabel {
    background-color:transparent;
    display:inline-block;
    vertidal-align:middle;
    border:0;
}

JavaScript

window.onload = function(){
    var radioButtonGroups = document.getElementsByClassName('radioGroupContainer');
    for(var i = 0; i != radioButtonGroups.length; i++)
    {
         var radioButtons = radioButtonGroups[i].getElementsByClassName('radioButtonContainer');
        for(var i = 0; i != radioButtons.length; i++)
        {
            radioButtons[i].onclick = function(){
                var value = this.children[0].getAttribute('name');
                for(var i = 0;  i != radioButtons.length; i++)
                {
                     radioButtons[i].children[0].setAttribute('class','radioButtonDot');   
                }
                this.children[0].setAttribute('class','radioButtonDotActive');
                this.parentNode.setAttribute('name',value);
            };   
        }
    }
};