html - CSS单选按钮标签需要圆圈

Question

我有单选按钮，我试图在每个标签上显示圆圈

 <ul>
     <li>
         <input type='radio' value='1' name='radio' id='radio1'/>
         <label for='radio1'>Value 1</label>
     </li>
 </ul>

和这个的CSS

 ul {
     list-style: none;
 }
 li {
     display: inline-block;
     margin-right: 15px;
 }
 input {
     visibility:hidden;
 }
 label {
     cursor: pointer;
 }
 input:checked + label {
     background: red;
 }

我需要用圆圈显示每个单选按钮的标签 我从 Here 得到这个例子

Answer 1

您可以使用 border-radius 使标签成为一个圆圈。

ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 15px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
    display: inline-block;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
}
input:checked + label {
    color: white;
}

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'>Value 1</label>
    </li>
    <li>
        <input type='radio' value='2' name='radio'  id='radio2'/>
        <label for='radio2'>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'>Value 3</label>
    </li>
</ul>