HTML
<input type="radio" name="test" value="1" checked> <input type="radio" name="test" value="2"> <input type="radio" name="test" value="3"> <input type="radio" name="test" value="4">
SCSS
input[type="radio"] { $size: 19px; $bulletSize: 15px; $bulletSizeChecked: 7px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: $size; height: $size; /* äußerer Ring */ &:before { content: ""; display: block; width: $size; height: $size; background: #BBBBCF; border-radius: $size; position: absolute; left: 0; top: 0; transition: all 200ms ease-in-out; } /* innerer Bullet */ &:after { content: ""; display: block; width: $bulletSize; height: $bulletSize; background: #EDEDED; border-radius: $size; position: absolute; left: ($size - $bulletSize) / 2; top: ($size - $bulletSize) / 2; transition: all 200ms ease-in-out; } &:checked { &:before { background: #7777A0; } &:after { background: #FFF; width: $bulletSizeChecked; height: $bulletSizeChecked; left: ($size - $bulletSizeChecked) / 2; top: ($size - $bulletSizeChecked) / 2; } } }
Script