I attempted to create a unique radio button design, but I'm struggling to figure out why the box-sizing property isn't functioning as expected.
Chrome:
FireFox:
What am I overlooking?
HTML:
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
CSS:
.radio-btn {
appearance: none;
box-sizing: border-box;
width: 0;
height: 0;
border-radius: 50%;
border: 6px solid #fff;
box-shadow: 0 0 0 2px #000;
transition: .2s border-color;
cursor: pointer;
}
.radio-btn:checked {
width: 12px;
height: 12px;
border: 3px solid #000;
box-shadow: 0 0 1px 2px #000;
}
.radio-btn:hover {
box-shadow: 0 0 1px 2px #000;
}
.radio-btn:focus {
outline: 0;
}