SOURCE

console 命令行工具 X clear

                    
>
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;
}