Radio button highlighting

by sanford

HTML

<div class="outer"><label for="r1" class="inner"></label><input id="r1" name="rg1" type="radio"></div>
<div class="outer"><label for="r2" class="inner"></label><input id="r2" name="rg1" type="radio"></div>
<div class="outer"><label for="r3" class="inner"></label><input id="r3" name="rg1" type="radio"></div>

CSS

.outer {
    line-height: 100px;
    width:100px;
    height: 100px;
    text-align:center;
    position:relative;
    background-color:beige;
}

.inner, .inner:after {
    display:inline;
    vertical-align: bottom;
    font-size:0;
    border: 20px solid rgba(230,20,0,.7);
    width:0;
    height:0;
    border-radius: 20px;
transition: all 240ms ease-out; 
    z-index:9;
    
}
.outer:hover .inner {
    border-width: 40px;
    border-radius: 40px;
}
input {
    height:20px;
    width:20px;
    position:absolute;
top:37px;
    left:36px;
    pointer-events:none;
        -moz-appearance: -moz-win-glass; /* fatter inner circle, smoother */

}