при нажатии на радиокнопку не появляется белая точка внутри, то есть, кнопка не нажимается. Как будто псевдокласс .checked не работает. Радиокнопки CSS

[xrissstina]

Вроде все получилось, стили работают, серый кружочек есть. Но при нажатии на радиокнопку не появляется белая точка внутри, то есть, кнопка не нажимается. Как будто псевдокласс .checked не работает. За помощь буду благодарна.
Это код CSS:

label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 16px;
}
.radio{
display:none;	
}
label:before{
content:"";
display:inline-block;
width:16px;
height:16px;
margin-right:15px;
position:absolute;
left:0;
bottom:0.5px;
background-color:#aaa;
box-shadow:inset 0px 2px 3px 0px rgba(0,0,0, .3), 0px 1px 0px 0px rgba (255,255,255, .8);
}
.divradio label:before{
border-radius:8px;
}
.radio:checked + label:before{
content:'\0000';
color:#f3f3f3;
font-size:30px;
text-align: center;
line-height:18px;
}

Это код HTML:

<div class='divradio'>
<input type='radio' name='r1' value='no' id='r1'class='radio'><label for='radio'>colspan</label><br><br>
<input type='radio' name='r1' value='yes' id='r2'class='radio'><label for='radio'>rowspan</label><br><br>
<input type='radio' name='r1' value='no' id='r3'class='radio'><label for='radio'>unity</label><br><br>
<input type='radio' name='r1' value='no' id='r4'class='radio'><label for='radio'>union</label><br><br><br>
</div>

[Alar]

https://jsfiddle.net/ewpnv7xj/

Вот это оставьте в CSS

.radio:checked + label:before{
content:'\0000';
color:#f3f3f3;
font-size:30px;
text-align: center;
line-height:18px;
}