Custom Radio Styles (incomplete)

NOT AODA Friendly

by Michael Mandarino

HTML

<input type="radio" name="demo" value="one" id="radio-one" class="form-radio" checked><label for="radio-one">Radio</label>
<input type="radio" name="demo" value="one" id="radio-two" class="form-radio" checked><label for="radio-one">Radio</label>
<input type="radio" name="demo" value="one" id="radio-one" class="form-radio" checked><label for="radio-one">Radio</label>
<input type="radio" name="demo" value="one" id="radio-one" class="form-radio" checked><label for="radio-one">Radio</label>
<input type="radio" name="demo" value="one" id="radio-one" class="form-radio" checked><label for="radio-one">Radio</label>

<br /><br />
Need AODA Tab Solution

CSS

.form-radio
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: #666;
     top: 10px;
     height: 30px;
     width: 30px;
     border: 0;
     border-radius: 50px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
}
.form-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 11px;
     top: 7px;
     content: '\02143';
     transform: rotate(40deg);
}
.form-radio:hover
{
     background-color: #f7f7f7;
}
.form-radio:checked
{
     background-color: #f1f1f1;
}
label
{
     font: 300 16px/1.7 'Open Sans', sans-serif;
     color: #666;
     cursor: pointer;
}