console
<div class="buttons">
<input type="radio" name='type' class='radio' id='ios'/>
<label for='ios'>ios</label>
</div>
<div class="buttons">
<input type="radio" name='type' class='radio' id='android'/>
<label for="android">android</label>
</div>
<div class="buttons">
<input type="radio" name='type' class='radio' id='hm'/>
<label for='hm'>鸿蒙</label>
</div>
.buttons{
display: inline-flex;
align-items: center;
}
input{
display: none
}
.radio + label{
}
.radio + label::before{
content: '';
height: 20px;
width: 20px;
border-radius: 50%;
border: 2px solid #ddd;
display: inline-flex;
transition: 0.4s;
}
.radio:checked + label::before{
border-color: green;
box-shadow: inset 0 0 0 6px green;
}