单选框实心圆怎么改成空心圆
时间: 2023-07-01 13:22:13 浏览: 241
您可以使用CSS来将单选框的实心圆改为空心圆。具体方法是在对应的单选框的样式中添加如下代码:
```
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ccc;
border-radius: 50%;
outline: none;
width: 16px;
height: 16px;
transition: all 0.2s ease-in-out;
}
input[type=radio]:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
transition: all 0.2s ease-in-out;
}
input[type=radio]:checked:before {
background-color: #333;
}
```
这里我们将单选框的外观样式设为 `none`,然后自定义一个空心圆的样式,并在选中时填充背景色。您可以根据自己的需要调整空心圆的大小、颜色等属性。
阅读全文
相关推荐















